/* Appearance themes: dark (Nord default), light, charcoal, charcoal-dark. */
/* --th-surface  = page background
   --th-elev     = card / table stripe / dropdown background
   --th-elev2    = nested panel (tabs, message bubble, input background)
   --th-panel    = footer / overlay panels
   --th-border   = primary border
   --th-border2  = softer divider border
   --th-input    = form input background
   --th-input-b  = input border
   --th-base     = primary text
   --th-muted    = secondary text
   --th-faint    = tertiary text
   --th-accent   = accent text (brand tint for themed pages) */

:root,
html[data-theme="dark"] {
  --th-surface: #2e3440;
  --th-elev: #3b4252;
  --th-elev2: #434c5e;
  --th-panel: #3b4252;
  --th-border: #4c566a;
  --th-border2: #434c5e;
  --th-input: #434c5e;
  --th-input-b: #4c566a;
  --th-base: #eceff4;
  --th-muted: #d8dee9;
  --th-faint: #81a1c1;
  --th-accent: #88c0d0;
  --th-glass: rgba(59, 66, 82, 0.7);
  --th-glass-border: rgba(216, 222, 233, 0.1);
}

html[data-theme="light"] {
  --th-surface: #f1f5f9;
  --th-elev: #ffffff;
  --th-elev2: #f8fafc;
  --th-panel: #ffffff;
  --th-border: #cbd5e1;
  --th-border2: #e2e8f0;
  --th-input: #ffffff;
  --th-input-b: #cbd5e1;
  --th-base: #0f172a;
  --th-muted: #475569;
  --th-faint: #64748b;
  --th-accent: #0284c7;
  --th-glass: rgba(255, 255, 255, 0.8);
  --th-glass-border: rgba(0, 0, 0, 0.08);
}

html[data-theme="charcoal"] {
  --th-surface: #1f2937;
  --th-elev: #374151;
  --th-elev2: #4b5563;
  --th-panel: #374151;
  --th-border: #4b5563;
  --th-border2: #374151;
  --th-input: #374151;
  --th-input-b: #4b5563;
  --th-base: #f3f4f6;
  --th-muted: #d1d5db;
  --th-faint: #9ca3af;
  --th-accent: #38bdf8;
  --th-glass: rgba(55, 65, 81, 0.7);
  --th-glass-border: rgba(255, 255, 255, 0.1);
}

html[data-theme="charcoal-dark"] {
  --th-surface: #111827;
  --th-elev: #1f2937;
  --th-elev2: #374151;
  --th-panel: #1f2937;
  --th-border: #374151;
  --th-border2: #1f2937;
  --th-input: #1f2937;
  --th-input-b: #374151;
  --th-base: #f3f4f6;
  --th-muted: #d1d5db;
  --th-faint: #9ca3af;
  --th-accent: #38bdf8;
  --th-glass: rgba(31, 41, 59, 0.7);
  --th-glass-border: rgba(255, 255, 255, 0.1);
}

/* Page background (overrides Tailwind html bg-slate-900) */
html[data-theme] {
  background-color: var(--th-surface);
}

/* Neutral surface, text, and border utilities remapped to theme variables */
html[data-theme] .bg-slate-950 {
  background-color: var(--th-surface);
}

html[data-theme] .bg-slate-900,
html[data-theme] .bg-slate-800,
html[data-theme] .bg-slate-700 {
  background-color: var(--th-elev);
}

html[data-theme] .bg-slate-950\/40,
html[data-theme] .bg-slate-900\/40,
html[data-theme] .bg-slate-800\/40,
html[data-theme] .bg-slate-900\/50,
html[data-theme] .bg-slate-950\/50,
html[data-theme] .bg-slate-900\/60,
html[data-theme] .bg-slate-800\/60,
html[data-theme] .bg-slate-900\/70,
html[data-theme] .bg-slate-900\/80,
html[data-theme] .bg-slate-950\/60,
html[data-theme] .bg-slate-950\/80,
html[data-theme] .bg-slate-800\/80 {
  background-color: var(--th-panel);
}

html[data-theme] .bg-slate-100 {
  background-color: var(--th-elev2);
}

html[data-theme] .text-slate-100 {
  color: var(--th-base);
}

html[data-theme] .text-slate-200 {
  color: var(--th-base);
}

html[data-theme] .text-slate-300 {
  color: var(--th-muted);
}

html[data-theme] .text-slate-400 {
  color: var(--th-muted);
}

html[data-theme] .text-slate-500,
html[data-theme] .text-slate-600 {
  color: var(--th-faint);
}

html[data-theme] .hover\:text-slate-100:hover {
  color: var(--th-base);
}

html[data-theme] .hover\:text-slate-200:hover {
  color: var(--th-base);
}

html[data-theme] .border-slate-500\/30,
html[data-theme] .border-slate-600,
html[data-theme] .border-slate-700,
html[data-theme] .border-slate-700\/50,
html[data-theme] .border-slate-700\/60,
html[data-theme] .border-slate-800,
html[data-theme] .border-slate-800\/60 {
  border-color: var(--th-border);
}

html[data-theme] .divide-slate-800\/60 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--th-border2);
}

html[data-theme] input,
html[data-theme] textarea,
html[data-theme] select {
  background-color: var(--th-input);
  border-color: var(--th-input-b);
  color: var(--th-base);
}

/* Brand text accent on light theme (dark brand text stays legible) */
html[data-theme="light"] .text-sky-400,
html[data-theme="light"] .text-sky-300 {
  color: var(--th-accent);
}

/* Deepen light accent shades on white surfaces for readability */
html[data-theme="light"] .text-red-400 { color: #dc2626; }
html[data-theme="light"] .text-orange-400 { color: #ea580c; }
html[data-theme="light"] .text-yellow-400 { color: #ca8a04; }
html[data-theme="light"] .text-amber-400 { color: #d97706; }
html[data-theme="light"] .text-emerald-400 { color: #059669; }
html[data-theme="light"] .text-indigo-400 { color: #4f46e5; }
html[data-theme="light"] .text-violet-400 { color: #7c3aed; }
html[data-theme="light"] .text-pink-400 { color: #db2777; }
html[data-theme="light"] .text-rose-400 { color: #e11d48; }
html[data-theme="light"] .text-teal-400 { color: #0d9488; }
html[data-theme="light"] .text-purple-400 { color: #9333ea; }
html[data-theme="light"] .text-amber-300 { color: #b45309; }
html[data-theme="light"] .text-red-300 { color: #dc2626; }
html[data-theme="light"] .text-emerald-300 { color: #059669; }

html[data-theme="light"] .hover\:text-amber-200:hover,
html[data-theme="light"] .hover\:text-amber-300:hover {
  color: #b45309;
}
html[data-theme="light"] .hover\:text-red-300:hover {
  color: #dc2626;
}
html[data-theme="light"] .hover\:text-emerald-300:hover,
html[data-theme="light"] .hover\:text-sky-300:hover {
  color: var(--th-accent);
}

/* Stat-card label tints */
html[data-theme="light"] .text-red-400\/70 { color: #dc2626; }
html[data-theme="light"] .text-sky-400\/70 { color: #0284c7; }
html[data-theme="light"] .text-amber-400\/70 { color: #d97706; }
html[data-theme="light"] .text-emerald-400\/70 { color: #059669; }

/* Slightly deepen the brand gradient on light backgrounds */
html[data-theme="light"] .from-sky-600 {
  --tw-gradient-from: #0284c7;
}

/* Login page full-bleed gradient background */
html[data-theme] #login-body {
  --tw-gradient-from: var(--th-surface);
  --tw-gradient-via: var(--th-elev);
  --tw-gradient-to: var(--th-surface);
}