/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — Light (default)
   RULE: Zero hardcoded colors below this block.
         Every visual value comes through a variable.
═══════════════════════════════════════════════════════════ */
:root {
  /* Backgrounds — 4 elevation levels */
  --bg-0:   #f0ede8;
  --bg-1:   #ffffff;
  --bg-2:   #faf9f6;
  --bg-3:   #ece9e2;

  /* Borders */
  --line:        #dedad2;
  --line-soft:   #e6e3db;
  --border:      var(--line);
  --border-soft: var(--line-soft);

  /* Typography */
  --text:      #18170f;
  --text-dim:  #524f46;
  --text-mute: #9a9789;

  /* Topbar glass */
  --topbar-bg: rgba(240,237,232,0.82);

  /* Body ambient gradients */
  --grad-warm: rgba(180,130,30,0.055);
  --grad-cool: rgba(70,110,210,0.04);

  /* Column card surface */
  --col-bg-start: #ffffff;
  --col-bg-end:   rgba(247,245,241,0.6);

  /* Scrollbar */
  --scroll-thumb:   #d8d4cc;
  --scroll-thumb-h: #c2beb5;

  /* Primary accent */
  --accent:     #9a6400;
  --accent-h:   #7a4e00;
  --accent-ink: #ffffff;
  --accent-glow: rgba(154,100,0,0.35);

  /* Interaction */
  --focus-ring:   rgba(90,130,210,0.14);
  --focus-border: #a0b0cc;
  --hover-bd:     #c8c4ba;

  /* Card */
  --card-bg:       #faf9f6;
  --card-hover-bg: #f4f1ec;
  --card-glow:     rgba(0,0,0,0.08);

  /* Status accent colors */
  --st-new:      #2455d0;
  --st-progress: #b07000;
  --st-accepted: #246e40;
  --st-done:     #6830b8;

  /* Status badge surfaces */
  --st-new-bg:      rgba(36,85,208,0.10);
  --st-progress-bg: rgba(176,112,0,0.10);
  --st-accepted-bg: rgba(36,110,64,0.10);
  --st-done-bg:     rgba(104,48,184,0.10);

  /* Type colors */
  --t-bug:     #b82828;
  --t-feature: #1e48b8;
  --t-support: #8c5200;

  /* Type badge surfaces */
  --t-bug-bg:     rgba(160,40,40,0.08);
  --t-bug-bd:     rgba(160,40,40,0.20);
  --t-feature-bg: rgba(30,72,184,0.08);
  --t-feature-bd: rgba(30,72,184,0.20);
  --t-support-bg: rgba(140,82,0,0.08);
  --t-support-bd: rgba(140,82,0,0.20);

  /* RGB values for rgba() calls */
  --accent-rgb:    154,100,0;
  --t-bug-rgb:     184,40,40;
  --t-feature-rgb: 30,72,184;
  --t-support-rgb: 140,82,0;

  /* Misc */
  --empty-cross:  #dedad2;
  --add-hover:    #ece9e2;
  --logout-hover-bd: #c8c4ba;

  /* Admin Dashboard compatibility aliases */
  --page:         var(--bg-0);
  --panel:        var(--bg-1);
  --surface:      var(--bg-1);
  --hover:        var(--bg-2);
  --selected:     var(--bg-3);
  --text-faint:   var(--text-mute);
  --text-muted:   var(--text-mute);
  --accent-light: rgba(154,100,0,0.08);
  --accent-soft:  rgba(154,100,0,0.15);
  --warn-soft:    rgba(176,112,0,0.12);
  --border-strong: #c8c4ba;
  --panel-2:      var(--bg-2);
  --shadow:       0 2px 8px rgba(0,0,0,0.1);
  --warn:         var(--st-progress);
  --warning:      var(--st-progress);
  --warning-bg:   var(--st-progress-bg);
  --danger:       var(--t-bug);
  --danger-bg:    var(--t-bug-bg);
  --success:      var(--st-accepted);
  --success-bg:   var(--st-accepted-bg);
  --accent-btn:   var(--accent);

  /* Theme icon visibility */
  --show-sun:  none;
  --show-moon: block;

  /* Typography */
  --font-display: 'Fraunces', serif;
  --font-body: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'Courier New', monospace;

  /* Spacing Scale — used for margins, padding, gaps */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* Font Sizes Scale */
  --fs-xs:   10px;
  --fs-sm:   11px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  28px;
  --fs-3xl:  32px;

  /* Line Heights */
  --lh-tight:   1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.75;

  /* Border radius */
  --radius: 9px;
  --radius-sm: 6px;
  --radius-lg: 14px;

  /* Touch Target Size (WCAG requirement) */
  --touch-min: 44px;

  /* Breakpoints (as comments; use in @media) */
  /* Mobile: ≤ 639px | Tablet: 640–879px | Desktop: ≥ 880px */
  /* Admin Dashboard: Sidebar (248px) shown only on Desktop (≥ 880px) */

  /* Transitions */
  --transition-colors: 0.22s ease;
  --transition-motion: 0.18s ease;
  --transition-theme: 0.22s ease;

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    --transition-colors: 0s;
    --transition-motion: 0s;
    --transition-theme: 0s;
  }
}

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — Dark
═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  /* Backgrounds — 4 elevation levels */
  --bg-0:   #0b0c0f;
  --bg-1:   #101217;
  --bg-2:   #151821;
  --bg-3:   #1b1f2a;

  /* Borders */
  --line:        #242836;
  --line-soft:   #1d2130;
  --border:      var(--line);
  --border-soft: var(--line-soft);

  /* Typography */
  --text:      #e9e7e2;
  --text-dim:  #a7a49b;
  --text-mute: #6b6a64;

  /* Topbar glass */
  --topbar-bg: rgba(11,12,15,0.78);

  /* Body ambient gradients */
  --grad-warm: rgba(232,194,106,0.06);
  --grad-cool: rgba(122,162,255,0.05);

  /* Column card surface */
  --col-bg-start: #101217;
  --col-bg-end:   rgba(21,24,33,0.4);

  /* Scrollbar */
  --scroll-thumb:   #1b1f2a;
  --scroll-thumb-h: #2a2f3d;

  /* Primary accent */
  --accent:     #e8c26a;
  --accent-h:   #f1cf83;
  --accent-ink: #0b0c0f;
  --accent-glow: rgba(232,194,106,0.55);

  /* Interaction */
  --focus-ring:   rgba(157,184,255,0.12);
  --focus-border: #3a3f52;
  --hover-bd:     #343948;

  /* Card */
  --card-bg:       #151821;
  --card-hover-bg: #181c26;
  --card-glow:     rgba(0,0,0,0.9);

  /* Status accent colors */
  --st-new:      #7aa2ff;
  --st-progress: #f5a524;
  --st-accepted: #5ecc8b;
  --st-done:     #a47de8;

  /* Status badge surfaces */
  --st-new-bg:      rgba(122,162,255,0.14);
  --st-progress-bg: rgba(245,165,36,0.14);
  --st-accepted-bg: rgba(94,204,139,0.14);
  --st-done-bg:     rgba(164,125,232,0.14);

  /* Type colors */
  --t-bug:     #ef6a6a;
  --t-feature: #7aa2ff;
  --t-support: #f0b23b;

  /* Type badge surfaces */
  --t-bug-bg:     rgba(239,106,106,0.13);
  --t-bug-bd:     rgba(239,106,106,0.22);
  --t-feature-bg: rgba(122,162,255,0.13);
  --t-feature-bd: rgba(122,162,255,0.22);
  --t-support-bg: rgba(240,178,59,0.13);
  --t-support-bd: rgba(240,178,59,0.22);

  /* RGB values for rgba() calls */
  --accent-rgb:    232,194,106;
  --t-bug-rgb:     239,106,106;
  --t-feature-rgb: 122,162,255;
  --t-support-rgb: 240,178,59;

  /* Misc */
  --empty-cross: #1d2130;
  --add-hover:   #151821;
  --logout-hover-bd: #36394a;

  /* Admin Dashboard compatibility aliases */
  --page:         var(--bg-0);
  --panel:        var(--bg-1);
  --surface:      var(--bg-1);
  --hover:        var(--bg-2);
  --selected:     var(--bg-3);
  --text-faint:   var(--text-mute);
  --text-muted:   var(--text-mute);
  --accent-light: rgba(232,194,106,0.10);
  --accent-soft:  rgba(232,194,106,0.15);
  --warn-soft:    rgba(245,165,36,0.12);
  --border-strong: #343948;
  --panel-2:      var(--bg-2);
  --shadow:       0 4px 12px rgba(0,0,0,0.3);
  --warn:         var(--st-progress);
  --warning:      var(--st-progress);
  --warning-bg:   var(--st-progress-bg);
  --danger:       var(--t-bug);
  --danger-bg:    var(--t-bug-bg);
  --success:      var(--st-accepted);
  --success-bg:   var(--st-accepted-bg);
  --accent-btn:   var(--accent);

  /* Theme icon visibility */
  --show-sun:  block;
  --show-moon: none;
}