/* ==========================================================================
   TempUp — Design Token System
   Progressive reskin with Light / Dark mode support
   ========================================================================== */

/* ── Google Fonts are loaded in the template via <link> ── */

:root {
  /* ── Brand Palette ─────────────────────────────────────────────────── */
  --tu-primary:          #6366f1;           /* indigo-500 */
  --tu-primary-hover:    #4f46e5;           /* indigo-600 */
  --tu-primary-light:    #e0e7ff;           /* indigo-100 */
  --tu-primary-subtle:   #eef2ff;           /* indigo-50  */
  --tu-primary-rgb:      99, 102, 241;

  --tu-secondary:        #8b5cf6;           /* violet-500 */
  --tu-secondary-hover:  #7c3aed;           /* violet-600 */

  --tu-accent:           #06b6d4;           /* cyan-500  */
  --tu-accent-light:     #cffafe;           /* cyan-100  */

  /* ── Semantic Colors ───────────────────────────────────────────────── */
  --tu-success:          #10b981;
  --tu-success-light:    #d1fae5;
  --tu-warning:          #f59e0b;
  --tu-warning-light:    #fef3c7;
  --tu-danger:           #ef4444;
  --tu-danger-light:     #fee2e2;
  --tu-info:             #3b82f6;
  --tu-info-light:       #dbeafe;

  /* ── Surface & Background ──────────────────────────────────────────── */
  --tu-bg-body:          #f8fafc;           /* slate-50 */
  --tu-bg-surface:       #ffffff;
  --tu-bg-surface-hover: #f1f5f9;           /* slate-100 */
  --tu-bg-surface-alt:   #f1f5f9;
  --tu-bg-inset:         #e2e8f0;           /* slate-200 */

  /* ── Text ──────────────────────────────────────────────────────────── */
  --tu-text-primary:     #0f172a;           /* slate-900 */
  --tu-text-secondary:   #475569;           /* slate-600 */
  --tu-text-muted:       #94a3b8;           /* slate-400 */
  --tu-text-inverse:     #ffffff;

  /* ── Borders ───────────────────────────────────────────────────────── */
  --tu-border:           #e2e8f0;           /* slate-200 */
  --tu-border-light:     #f1f5f9;
  --tu-border-focus:     var(--tu-primary);

  /* ── Shadows ───────────────────────────────────────────────────────── */
  --tu-shadow-xs:        0 1px 2px rgba(0, 0, 0, 0.05);
  --tu-shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --tu-shadow-md:        0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --tu-shadow-lg:        0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --tu-shadow-xl:        0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

  /* ── Radius ────────────────────────────────────────────────────────── */
  --tu-radius-sm:        0.375rem;
  --tu-radius-md:        0.5rem;
  --tu-radius-lg:        0.75rem;
  --tu-radius-xl:        1rem;
  --tu-radius-full:      9999px;

  /* ── Spacing ───────────────────────────────────────────────────────── */
  --tu-space-1:          0.25rem;
  --tu-space-2:          0.5rem;
  --tu-space-3:          0.75rem;
  --tu-space-4:          1rem;
  --tu-space-6:          1.5rem;
  --tu-space-8:          2rem;

  /* ── Transitions ───────────────────────────────────────────────────── */
  --tu-transition-fast:  150ms ease;
  --tu-transition:       250ms ease;
  --tu-transition-slow:  350ms ease;

  /* ── Sidebar ───────────────────────────────────────────────────────── */
  --tu-sidebar-bg:       #ffffff;
  --tu-sidebar-text:     #475569;
  --tu-sidebar-text-active: var(--tu-primary);
  --tu-sidebar-hover-bg: #f1f5f9;
  --tu-sidebar-border:   #e2e8f0;
  --tu-sidebar-brand-bg: #ffffff;
  --tu-sidebar-label:    #94a3b8;

  /* ── Navbar ────────────────────────────────────────────────────────── */
  --tu-navbar-bg:        rgba(255, 255, 255, 0.85);
  --tu-navbar-border:    #e2e8f0;
  --tu-navbar-text:      #334155;

  /* ── Cards ─────────────────────────────────────────────────────────── */
  --tu-card-bg:          #ffffff;
  --tu-card-border:      #e2e8f0;
  --tu-card-shadow:      var(--tu-shadow-sm);

  /* ── Forms ─────────────────────────────────────────────────────────── */
  --tu-input-bg:         #ffffff;
  --tu-input-border:     #cbd5e1;
  --tu-input-text:       #0f172a;
  --tu-input-placeholder:#94a3b8;
  --tu-input-focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.15);

  /* ── Tables ────────────────────────────────────────────────────────── */
  --tu-table-header-bg:  #f1f5f9;
  --tu-table-row-hover:  #f8fafc;
  --tu-table-border:     #e2e8f0;
  --tu-table-stripe:     #fafbfc;

  /* ── Gradient Presets ──────────────────────────────────────────────── */
  --tu-gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --tu-gradient-accent:  linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
  --tu-gradient-hero:    linear-gradient(135deg, #eef2ff 0%, #e0e7ff 50%, #ede9fe 100%);

  /* ── Loading / Overlay ─────────────────────────────────────────────── */
  --tu-overlay-bg:       rgba(0, 0, 0, 0.5);
  --tu-loading-bg:       rgba(255, 255, 255, 0.90);

  /* ── Scrollbar ─────────────────────────────────────────────────────── */
  --tu-scrollbar-track:  #f1f5f9;
  --tu-scrollbar-thumb:  #cbd5e1;
  --tu-scrollbar-hover:  #94a3b8;
}


/* ==========================================================================
   DARK MODE
   ========================================================================== */
[data-theme="dark"] {
  /* ── Brand (subtle adjustment for dark bg) ─────────────────────────── */
  --tu-primary:          #818cf8;           /* indigo-400 – brighter on dark */
  --tu-primary-hover:    #6366f1;
  --tu-primary-light:    rgba(99, 102, 241, 0.15);
  --tu-primary-subtle:   rgba(99, 102, 241, 0.08);
  --tu-primary-rgb:      129, 140, 248;

  --tu-secondary:        #a78bfa;
  --tu-secondary-hover:  #8b5cf6;

  --tu-accent:           #22d3ee;
  --tu-accent-light:     rgba(6, 182, 212, 0.15);

  /* ── Semantic ──────────────────────────────────────────────────────── */
  --tu-success-light:    rgba(16, 185, 129, 0.15);
  --tu-warning-light:    rgba(245, 158, 11, 0.15);
  --tu-danger-light:     rgba(239, 68, 68, 0.15);
  --tu-info-light:       rgba(59, 130, 246, 0.15);

  /* ── Surface & Background ──────────────────────────────────────────── */
  --tu-bg-body:          #0f172a;           /* slate-900 */
  --tu-bg-surface:       #1e293b;           /* slate-800 */
  --tu-bg-surface-hover: #334155;           /* slate-700 */
  --tu-bg-surface-alt:   #1e293b;
  --tu-bg-inset:         #0f172a;

  /* ── Text ──────────────────────────────────────────────────────────── */
  --tu-text-primary:     #f1f5f9;           /* slate-100 */
  --tu-text-secondary:   #cbd5e1;           /* slate-300 */
  --tu-text-muted:       #64748b;           /* slate-500 */
  --tu-text-inverse:     #0f172a;

  /* ── Borders ───────────────────────────────────────────────────────── */
  --tu-border:           #334155;
  --tu-border-light:     #1e293b;

  /* ── Shadows ───────────────────────────────────────────────────────── */
  --tu-shadow-xs:        0 1px 2px rgba(0, 0, 0, 0.2);
  --tu-shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
  --tu-shadow-md:        0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -2px rgba(0, 0, 0, 0.15);
  --tu-shadow-lg:        0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
  --tu-shadow-xl:        0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);

  /* ── Sidebar ───────────────────────────────────────────────────────── */
  --tu-sidebar-bg:       #1e293b;
  --tu-sidebar-text:     #cbd5e1;
  --tu-sidebar-text-active: #818cf8;
  --tu-sidebar-hover-bg: #334155;
  --tu-sidebar-border:   #334155;
  --tu-sidebar-brand-bg: #1e293b;
  --tu-sidebar-label:    #64748b;

  /* ── Navbar ────────────────────────────────────────────────────────── */
  --tu-navbar-bg:        rgba(30, 41, 59, 0.85);
  --tu-navbar-border:    #334155;
  --tu-navbar-text:      #e2e8f0;

  /* ── Cards ─────────────────────────────────────────────────────────── */
  --tu-card-bg:          #1e293b;
  --tu-card-border:      #334155;
  --tu-card-shadow:      var(--tu-shadow-sm);

  /* ── Forms ─────────────────────────────────────────────────────────── */
  --tu-input-bg:         #0f172a;
  --tu-input-border:     #475569;
  --tu-input-text:       #f1f5f9;
  --tu-input-placeholder:#64748b;
  --tu-input-focus-ring: 0 0 0 3px rgba(129, 140, 248, 0.25);

  /* ── Tables ────────────────────────────────────────────────────────── */
  --tu-table-header-bg:  #334155;
  --tu-table-row-hover:  #1e293b;
  --tu-table-border:     #334155;
  --tu-table-stripe:     rgba(255, 255, 255, 0.02);

  /* ── Gradients ─────────────────────────────────────────────────────── */
  --tu-gradient-primary: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
  --tu-gradient-accent:  linear-gradient(135deg, #22d3ee 0%, #818cf8 100%);
  --tu-gradient-hero:    linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #1e293b 100%);

  /* ── Loading / Overlay ─────────────────────────────────────────────── */
  --tu-overlay-bg:       rgba(0, 0, 0, 0.7);
  --tu-loading-bg:       rgba(15, 23, 42, 0.90);

  /* ── Scrollbar ─────────────────────────────────────────────────────── */
  --tu-scrollbar-track:  #1e293b;
  --tu-scrollbar-thumb:  #475569;
  --tu-scrollbar-hover:  #64748b;
}


/* ==========================================================================
   BASE RESETS — Applied globally when tokens are loaded
   ========================================================================== */

/* Typography */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Smooth theme transitions */
body,
.main-sidebar,
.main-sidebar .sidebar-menu,
.navbar,
.card,
.form-control,
.btn,
.table,
.modal-content,
.dropdown-menu,
.main-content {
  transition: background-color var(--tu-transition), color var(--tu-transition), border-color var(--tu-transition), box-shadow var(--tu-transition);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--tu-scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--tu-scrollbar-thumb);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--tu-scrollbar-hover);
}

/* ── Theme Toggle Button ─────────────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--tu-radius-full);
  border: 1px solid var(--tu-border);
  background: var(--tu-bg-surface);
  color: var(--tu-text-secondary);
  cursor: pointer;
  transition: all var(--tu-transition);
  font-size: 18px;
  line-height: 1;
  padding: 0;
  margin: 0 8px;
}
.theme-toggle:hover {
  background: var(--tu-bg-surface-hover);
  color: var(--tu-primary);
  border-color: var(--tu-primary);
  transform: rotate(15deg);
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  transition: opacity var(--tu-transition-fast), transform var(--tu-transition-fast);
}
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: inline; }