/*
 * themes.css — Baked Fresh Daily
 * Load BEFORE each page's own <style> block.
 *
 * Architecture: two independent axes
 *   data-theme = named visual skin (default / apple-modern / windows-95 / matrix / …)
 *   data-mode  = color overlay   (default / dark / warm)
 *
 * CSS cascade order (modes come AFTER themes so they win on color tokens):
 *   1. :root base defaults
 *   2. Named theme color blocks
 *   3. Named theme structural overrides (font / border-radius / etc.)
 *   4. Color mode blocks  ← overrides theme colors
 *   5. Matrix block       ← total override (defensive; JS also prevents mode on matrix)
 *   6. Widget CSS
 *
 * Token reference:
 *   --bg, --surface, --surface-alt
 *   --text-primary, --text-secondary, --text-muted, --text (Export alias)
 *   --accent, --accent-hover, --accent-dim, --accent-dim-hov
 *   --border, --border-focus, --border-strong
 *   --input-bg
 *   --header-bg, --header-text, --header-text-dim
 *   --hero-text, --hero-sub  (Financial Hub hero; follows --header-text on light themes)
 *   --badge-ready-bg/fg, --badge-soon-bg/fg  (Financial Hub cards)
 *   --success/bg/bd, --danger/bg/bd, --warn/bg/bd
 *   --shadow-sm, --shadow-md, --shadow-hover
 *   --surface2, --btn-bg, --btn-text  (Export page aliases)
 */

/* ─────────────────────────────────────────────────────────
   BASE DEFAULTS  — Slate theme
   Cool blue-grey header (#1e293b), indigo accent (#6366f1),
   slate-100 background, white card surfaces.
   ───────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:               #f1f5f9;   /* slate-100 */
  --surface:          #ffffff;
  --surface-alt:      #f8fafc;   /* slate-50  */
  --surface2:         #f1f5f9;

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

  /* Accent — indigo */
  --accent:           #6366f1;
  --accent-hover:     #4f46e5;
  --accent-dim:       rgba(99,102,241,0.10);
  --accent-dim-hov:   rgba(99,102,241,0.18);

  /* Borders */
  --border:           #e2e8f0;   /* slate-200 */
  --border-focus:     #6366f1;
  --border-strong:    #cbd5e1;   /* slate-300 */

  /* Inputs */
  --input-bg:         #f8fafc;

  /* Header */
  --header-bg:        #1e293b;   /* slate-800 */
  --header-text:      #f1f5f9;
  --header-text-dim:  rgba(241,245,249,0.55);

  /* Hub hero — follows header on dark-header themes */
  --hero-text:        #f1f5f9;
  --hero-sub:         rgba(241,245,249,0.65);

  /* Badges (hub cards) */
  --badge-ready-bg:   rgba(22,163,74,0.11);
  --badge-ready-fg:   #15803d;
  --badge-soon-bg:    rgba(99,102,241,0.10);
  --badge-soon-fg:    #4338ca;

  /* Semantic */
  --success:          #16a34a;
  --success-bg:       rgba(22,163,74,0.09);
  --success-bd:       rgba(22,163,74,0.22);
  --danger:           #dc2626;
  --danger-bg:        rgba(220,38,38,0.09);
  --danger-bd:        rgba(220,38,38,0.22);
  --warn:             #d97706;
  --warn-bg:          rgba(217,119,6,0.10);
  --warn-bd:          rgba(217,119,6,0.22);

  /* Shadows */
  --shadow-sm:        0 1px 3px rgba(15,23,42,0.06), 0 2px 8px rgba(15,23,42,0.04);
  --shadow-md:        0 4px 18px rgba(15,23,42,0.09), 0 14px 36px rgba(15,23,42,0.06);
  --shadow-hover:     0 6px 20px rgba(15,23,42,0.13), 0 16px 40px rgba(15,23,42,0.08);

  /* Export / wizard aliases */
  --btn-bg:           #6366f1;
  --btn-text:         #ffffff;

  /* Calculator page aliases */
  --fg:               #0f172a;
  --card-bg:          #ffffff;
  --inp-bg:           #f8fafc;
  --shadow:           0 1px 3px rgba(15,23,42,0.06), 0 2px 8px rgba(15,23,42,0.04);
  --shadow-card:      0 1px 3px rgba(15,23,42,0.08), 0 4px 14px rgba(15,23,42,0.06);
  --radius:           0.5rem;

  color-scheme: light;
}


/* ═════════════════════════════════════════════════════════
   NAMED THEMES  (color + personality tokens)
   ═════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   APPLE — MODERN (macOS Sonoma / Ventura)
   ───────────────────────────────────────────────────────── */
:root[data-theme="apple-modern"] {
  --bg:               #ececec;
  --surface:          #ffffff;
  --surface-alt:      #f5f5f7;
  --text-primary:     #1d1d1f;
  --text-secondary:   #6e6e73;
  --text-muted:       #86868b;
  --text:             #1d1d1f;
  --accent:           #007AFF;
  --accent-hover:     #0060df;
  --accent-dim:       rgba(0,122,255,0.10);
  --accent-dim-hov:   rgba(0,122,255,0.18);
  --border:           rgba(0,0,0,0.10);
  --border-focus:     #007AFF;
  --border-strong:    rgba(0,0,0,0.18);
  --input-bg:         rgba(255,255,255,0.90);
  --header-bg:        rgba(242,242,242,0.88);
  --header-text:      #1d1d1f;
  --header-text-dim:  rgba(29,29,31,0.48);
  /* Hero follows header on light-bg themes */
  --hero-text:        var(--header-text);
  --hero-sub:         var(--header-text-dim);
  --badge-ready-bg:   rgba(22,130,65,0.11);
  --badge-ready-fg:   #166a35;
  --badge-soon-bg:    rgba(0,122,255,0.10);
  --badge-soon-fg:    #005fcc;
  --success:          #34c759;
  --success-bg:       rgba(52,199,89,0.10);
  --success-bd:       rgba(52,199,89,0.28);
  --danger:           #ff3b30;
  --danger-bg:        rgba(255,59,48,0.10);
  --danger-bd:        rgba(255,59,48,0.28);
  --warn:             #ff9500;
  --warn-bg:          rgba(255,149,0,0.10);
  --warn-bd:          rgba(255,149,0,0.28);
  --shadow-sm:        0 1px 4px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:        0 4px 20px rgba(0,0,0,0.12), 0 12px 32px rgba(0,0,0,0.08);
  --shadow-hover:     0 8px 28px rgba(0,0,0,0.16), 0 20px 48px rgba(0,0,0,0.10);
  --surface2:         #f5f5f7;
  --btn-bg:           #007AFF;
  --btn-text:         #ffffff;
  color-scheme: light;
}

/* San Francisco everywhere. Pages hard-code Inter / IBM Plex Mono on many
   elements, so this has to reach every element and win over them. SF is only
   installed on Apple devices; others fall back to Helvetica Neue / Arial. */
html[data-theme="apple-modern"],
html[data-theme="apple-modern"] body,
html[data-theme="apple-modern"] body * {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
               'Helvetica Neue', Arial, sans-serif !important;
}

/* Results headers (Net Worth .results-hero; Take Home Pay, Budget, Loan and
   Inflation .results-hdr) use --btn-bg, which is blue here. Keep buttons
   blue but give the headers a macOS window grey. */
html[data-theme="apple-modern"] .results-hero,
html[data-theme="apple-modern"] .results-hdr {
  background: #e8e8ed;
  color: #1d1d1f;
}
html[data-theme="apple-modern"] .results-hero::before,
html[data-theme="apple-modern"] .results-hdr::before {
  display: none;
}
html[data-theme="apple-modern"] :is(.results-hero, .results-hdr) .res-trio {
  background: rgba(255,255,255,0.70);
}
/* Retirement's header buttons are white-on-translucent for a dark header;
   the header here is light grey, so give them dark text */
html[data-theme="apple-modern"]:not([data-mode="dark"]) .header-actions .btn-ghost {
  color: var(--accent);
  background: rgba(255,255,255,0.75);
  border-color: var(--border-strong);
}
html[data-theme="apple-modern"]:not([data-mode="dark"]) .header-actions .btn-ghost:hover {
  background: #ffffff;
}
/* Their figures are colored for a dark header; use Apple's light-mode colors */
html[data-theme="apple-modern"] :is(.results-hero, .results-hdr) :is(.positive, .assets, .net, .surplus) {
  color: #248a3d;
}
html[data-theme="apple-modern"] :is(.results-hero, .results-hdr) :is(.negative, .liabs, .deficit, .cost) {
  color: #d70015;
}
html[data-theme="apple-modern"] :is(.results-hero, .results-hdr) :is(.taxes, .outgo) {
  color: #c93400;
}
html[data-theme="apple-modern"] :is(.results-hero, .results-hdr) :is(.neutral, .income, .even, .zero) {
  color: #1d1d1f;
}

/* ─────────────────────────────────────────────────────────
   WINDOWS — WINDOWS 95 (Classic Silver + Teal Desktop)
   ───────────────────────────────────────────────────────── */
:root[data-theme="windows-95"] {
  --bg:               #008080;
  --surface:          #c0c0c0;
  --surface-alt:      #b0b0b0;
  --text-primary:     #000000;
  --text-secondary:   #333333;
  --text-muted:       #666666;
  --text:             #000000;
  --accent:           #000080;
  --accent-hover:     #000070;
  --accent-dim:       rgba(0,0,128,0.15);
  --accent-dim-hov:   rgba(0,0,128,0.25);
  --border:           #808080;
  --border-focus:     #000080;
  --border-strong:    #000000;
  --input-bg:         #ffffff;
  --header-bg:        linear-gradient(to right, #000080, #1084d0);
  --header-text:      #ffffff;
  --header-text-dim:  rgba(255,255,255,0.70);
  --badge-ready-bg:   rgba(0,100,0,0.15);
  --badge-ready-fg:   #004000;
  --badge-soon-bg:    rgba(0,0,128,0.15);
  --badge-soon-fg:    #000080;
  --success:          #006600;
  --success-bg:       rgba(0,102,0,0.12);
  --success-bd:       rgba(0,102,0,0.30);
  --danger:           #cc0000;
  --danger-bg:        rgba(204,0,0,0.12);
  --danger-bd:        rgba(204,0,0,0.30);
  --warn:             #996600;
  --warn-bg:          rgba(153,102,0,0.12);
  --warn-bd:          rgba(153,102,0,0.30);
  --shadow-sm:        2px 2px 0 #808080;
  --shadow-md:        2px 2px 0 #000000;
  --shadow-hover:     3px 3px 0 #000000;
  --surface2:         #b0b0b0;
  --btn-bg:           #c0c0c0;
  --btn-text:         #000000;
  color-scheme: light;
}

html[data-theme="windows-95"],
html[data-theme="windows-95"] body,
html[data-theme="windows-95"] input,
html[data-theme="windows-95"] select,
html[data-theme="windows-95"] button,
html[data-theme="windows-95"] textarea {
  font-family: 'Arial', 'Tahoma', sans-serif;
  font-size: 11px;
}

/* Windows 95 structural: 3D bevel, sharp corners */
html[data-theme="windows-95"] .card,
html[data-theme="windows-95"] .wizard-card,
html[data-theme="windows-95"] .metric-card,
html[data-theme="windows-95"] .wd-card,
html[data-theme="windows-95"] .promo-row,
html[data-theme="windows-95"] .pension-row,
html[data-theme="windows-95"] .option-card {
  border-radius: 0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: 1px 1px 0 #000;
}

html[data-theme="windows-95"] .card-header {
  border-radius: 0;
  background: linear-gradient(to right, #000080, #1084d0);
  border-bottom: 1px solid #808080;
}

html[data-theme="windows-95"] .card-title { color: #ffffff; }

html[data-theme="windows-95"] input,
html[data-theme="windows-95"] select {
  border-radius: 0;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
}

html[data-theme="windows-95"] .btn,
html[data-theme="windows-95"] button:not(.btn-rem),
html[data-theme="windows-95"] a.accent-btn {
  border-radius: 0;
  background: #c0c0c0;
  color: #000;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: 1px 1px 0 #000;
}

html[data-theme="windows-95"] .btn:active,
html[data-theme="windows-95"] button:not(.btn-rem):active,
html[data-theme="windows-95"] a.accent-btn:active {
  border-color: #808080 #ffffff #ffffff #808080;
  box-shadow: none;
}

html[data-theme="windows-95"] .btn-primary,
html[data-theme="windows-95"] .btn-green {
  background: #c0c0c0;
  color: #000;
  font-weight: 700;
}

html[data-theme="windows-95"] .page-header {
  border-bottom: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
}


/* ═════════════════════════════════════════════════════════
   COLOR MODES  (come after named themes — mode wins cascade)
   ═════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   DARK MODE
   Graphite with an indigo accent (matches Default light)
   ───────────────────────────────────────────────────────── */
:root[data-mode="dark"] {
  --bg:               #121417;
  --surface:          #1b1e24;
  --surface-alt:      #16181d;
  --text-primary:     #e7e9ee;
  --text-secondary:   #9aa1ad;
  --text-muted:       #6e7582;
  --text:             #e7e9ee;
  --accent:           #818cf8;
  --accent-hover:     #a5b4fc;
  --accent-dim:       rgba(129,140,248,0.14);
  --accent-dim-hov:   rgba(129,140,248,0.24);
  --border:           #2a2e36;
  --border-focus:     #818cf8;
  --border-strong:    #3a3f4a;
  --input-bg:         #16181d;
  --header-bg:        #0b0c0f;
  --header-text:      #e7e9ee;
  --header-text-dim:  rgba(231,233,238,0.50);
  /* Hero tokens inherit via --header-text */
  --hero-text:        #e7e9ee;
  --hero-sub:         rgba(231,233,238,0.60);
  --badge-ready-bg:   rgba(74,222,128,0.12);
  --badge-ready-fg:   #4ade80;
  --badge-soon-bg:    rgba(129,140,248,0.15);
  --badge-soon-fg:    #a5b4fc;
  --success:          #4ade80;
  --success-bg:       rgba(74,222,128,0.09);
  --success-bd:       rgba(74,222,128,0.22);
  --danger:           #f87171;
  --danger-bg:        rgba(248,113,113,0.09);
  --danger-bd:        rgba(248,113,113,0.22);
  --warn:             #f5a742;
  --warn-bg:          rgba(245,167,66,0.10);
  --warn-bd:          rgba(245,167,66,0.22);
  --shadow-sm:        0 1px 3px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25);
  --shadow-md:        0 4px 18px rgba(0,0,0,0.40), 0 14px 36px rgba(0,0,0,0.30);
  --shadow-hover:     0 6px 20px rgba(0,0,0,0.50), 0 16px 40px rgba(0,0,0,0.36);
  --surface2:         #22262d;
  /* Also the background of the calculators' results headers, so it stays a
     raised graphite rather than a light fill */
  --btn-bg:           #262a33;
  --btn-text:         #e7e9ee;
  color-scheme: dark;
}


/* ─────────────────────────────────────────────────────────
   WARM MODE — Cream (close to Sepia Medium) with sage / olive accents
   Forest-green palette, earthy and calm
   ───────────────────────────────────────────────────────── */
:root[data-mode="warm"] {
  --bg:               #e4d8bc;
  --surface:          #efe7d3;
  --surface-alt:      #dbcdab;
  --text-primary:     #1c2214;
  --text-secondary:   #495a33;
  --text-muted:       #66784b;
  --text:             #1c2214;
  --accent:           #3d6b35;
  --accent-hover:     #2e5228;
  --accent-dim:       rgba(61,107,53,0.12);
  --accent-dim-hov:   rgba(61,107,53,0.22);
  --border:           #cbbb95;
  --border-focus:     #3d6b35;
  --border-strong:    #b6a27a;
  --input-bg:         #f6f0e2;
  --header-bg:        linear-gradient(135deg, #1a2e15 0%, #2c4a22 100%);
  --header-text:      #d8eacb;
  --header-text-dim:  rgba(216,234,203,0.60);
  --hero-text:        #d8eacb;
  --hero-sub:         rgba(216,234,203,0.65);
  --badge-ready-bg:   rgba(45,110,52,0.12);
  --badge-ready-fg:   #2d6e34;
  --badge-soon-bg:    rgba(100,80,0,0.12);
  --badge-soon-fg:    #6a5400;
  --success:          #2d6e34;
  --success-bg:       rgba(45,110,52,0.10);
  --success-bd:       rgba(45,110,52,0.22);
  --danger:           #c0392b;
  --danger-bg:        rgba(192,57,43,0.10);
  --danger-bd:        rgba(192,57,43,0.22);
  --warn:             #7a6200;
  --warn-bg:          rgba(122,98,0,0.10);
  --warn-bd:          rgba(122,98,0,0.22);
  --shadow-sm:        0 1px 3px rgba(28,34,20,0.07), 0 2px 8px rgba(28,34,20,0.04);
  --shadow-md:        0 4px 18px rgba(28,34,20,0.09), 0 14px 36px rgba(28,34,20,0.06);
  --shadow-hover:     0 6px 20px rgba(28,34,20,0.13), 0 16px 40px rgba(28,34,20,0.08);
  --surface2:         #dbcdab;
  --btn-bg:           #1a2e15;
  --btn-text:         #d8eacb;
  color-scheme: light;
}


/* ═════════════════════════════════════════════════════════
   THEME + MODE COMBINATIONS
   Higher specificity (two attributes = 0,2,0) so these win
   over both the named theme block AND the generic mode block.
   ═════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   macOS MODERN — Dark Mode  (macOS Sonoma / Ventura dark)
   True Apple system colors: near-black grays, blue accent
   ───────────────────────────────────────────────────────── */
:root[data-theme="apple-modern"][data-mode="dark"] {
  --bg:               #1c1c1e;   /* systemBackground dark */
  --surface:          #2c2c2e;   /* secondarySystemGroupedBackground */
  --surface-alt:      #3a3a3c;   /* tertiarySystemGroupedBackground */
  --text-primary:     #ffffff;
  --text-secondary:   #8e8e93;   /* systemGray */
  --text-muted:       #636366;   /* systemGray2 */
  --text:             #ffffff;
  --accent:           #0a84ff;   /* systemBlue dark-variant */
  --accent-hover:     #409cff;
  --accent-dim:       rgba(10,132,255,0.14);
  --accent-dim-hov:   rgba(10,132,255,0.24);
  --border:           rgba(255,255,255,0.10);
  --border-focus:     #0a84ff;
  --border-strong:    rgba(255,255,255,0.18);
  --input-bg:         #1c1c1e;
  --header-bg:        rgba(28,28,30,0.90);  /* vibrancy dark */
  --header-text:      #ffffff;
  --header-text-dim:  rgba(255,255,255,0.52);
  --hero-text:        #ffffff;
  --hero-sub:         rgba(255,255,255,0.58);
  --badge-ready-bg:   rgba(52,199,89,0.14);
  --badge-ready-fg:   #32d74b;   /* systemGreen dark */
  --badge-soon-bg:    rgba(10,132,255,0.14);
  --badge-soon-fg:    #0a84ff;
  --success:          #32d74b;
  --success-bg:       rgba(50,215,75,0.10);
  --success-bd:       rgba(50,215,75,0.25);
  --danger:           #ff453a;   /* systemRed dark */
  --danger-bg:        rgba(255,69,58,0.10);
  --danger-bd:        rgba(255,69,58,0.25);
  --warn:             #ff9f0a;   /* systemOrange dark */
  --warn-bg:          rgba(255,159,10,0.10);
  --warn-bd:          rgba(255,159,10,0.25);
  --shadow-sm:        0 1px 4px rgba(0,0,0,0.50);
  --shadow-md:        0 4px 20px rgba(0,0,0,0.55);
  --shadow-hover:     0 8px 30px rgba(0,0,0,0.65);
  --surface2:         #3a3a3c;
  --btn-bg:           #0a84ff;
  --btn-text:         #ffffff;
  color-scheme: dark;
}

html[data-theme="apple-modern"][data-mode="dark"] .results-hero,
html[data-theme="apple-modern"][data-mode="dark"] .results-hdr {
  background: #3a3a3c;
  color: #ffffff;
}
html[data-theme="apple-modern"][data-mode="dark"] :is(.results-hero, .results-hdr) .res-trio {
  background: rgba(255,255,255,0.06);
}
html[data-theme="apple-modern"][data-mode="dark"] :is(.results-hero, .results-hdr) :is(.positive, .assets, .net, .surplus) {
  color: #32d74b;
}
html[data-theme="apple-modern"][data-mode="dark"] :is(.results-hero, .results-hdr) :is(.negative, .liabs, .deficit, .cost) {
  color: #ff453a;
}
html[data-theme="apple-modern"][data-mode="dark"] :is(.results-hero, .results-hdr) :is(.taxes, .outgo) {
  color: #ff9f0a;
}
html[data-theme="apple-modern"][data-mode="dark"] :is(.results-hero, .results-hdr) :is(.neutral, .income, .even, .zero) {
  color: #ffffff;
}

/* ═════════════════════════════════════════════════════════
   MATRIX — Complete override (comes last; also gated by JS)
   Black bg, phosphor green text, monospace font, glow
   ═════════════════════════════════════════════════════════ */
:root[data-theme="matrix"] {
  --bg:               #000000;
  --surface:          #010f01;
  --surface-alt:      #030a03;
  --text-primary:     #00ff41;
  --text-secondary:   #008822;
  --text-muted:       #005518;
  --text:             #00ff41;
  --accent:           #00ff41;
  --accent-hover:     #00cc33;
  --accent-dim:       rgba(0,255,65,0.08);
  --accent-dim-hov:   rgba(0,255,65,0.14);
  --border:           #002200;
  --border-focus:     #00aa2a;
  --border-strong:    #004400;
  --input-bg:         #010f01;
  --header-bg:        #030a03;
  --header-text:      #00ff41;
  --header-text-dim:  rgba(0,255,65,0.50);
  --hero-text:        #00ff41;
  --hero-sub:         rgba(0,255,65,0.60);
  --badge-ready-bg:   rgba(0,255,65,0.10);
  --badge-ready-fg:   #00ff41;
  --badge-soon-bg:    rgba(255,255,0,0.08);
  --badge-soon-fg:    #cccc00;
  --success:          #00ff41;
  --success-bg:       rgba(0,255,65,0.07);
  --success-bd:       rgba(0,255,65,0.22);
  --danger:           #ff4444;
  --danger-bg:        rgba(255,68,68,0.08);
  --danger-bd:        rgba(255,68,68,0.22);
  --warn:             #ffff00;
  --warn-bg:          rgba(255,255,0,0.07);
  --warn-bd:          rgba(255,255,0,0.22);
  --shadow-sm:        0 0 8px rgba(0,255,65,0.12);
  --shadow-md:        0 0 20px rgba(0,255,65,0.16);
  --shadow-hover:     0 0 32px rgba(0,255,65,0.26);
  --surface2:         #030a03;
  --btn-bg:           #003300;
  --btn-text:         #00ff41;
  color-scheme: dark;
}

html[data-theme="matrix"],
html[data-theme="matrix"] body,
html[data-theme="matrix"] input,
html[data-theme="matrix"] select,
html[data-theme="matrix"] button,
html[data-theme="matrix"] textarea {
  font-family: 'IBM Plex Mono', 'Courier New', 'Lucida Console', monospace;
}

html[data-theme="matrix"] .metric-value,
html[data-theme="matrix"] .hero-title,
html[data-theme="matrix"] .step-title,
html[data-theme="matrix"] .card-title {
  text-shadow: 0 0 12px rgba(0,255,65,0.55);
}

html[data-theme="matrix"] .card,
html[data-theme="matrix"] .wizard-card,
html[data-theme="matrix"] .metric-card {
  box-shadow: 0 0 16px rgba(0,255,65,0.10), inset 0 0 0 1px rgba(0,255,65,0.12);
  border-color: #002200;
}

html[data-theme="matrix"] .btn-primary,
html[data-theme="matrix"] .btn-green {
  background: #003300;
  color: #00ff41;
  border: 1px solid #00aa2a;
  box-shadow: 0 0 12px rgba(0,255,65,0.18);
}

html[data-theme="matrix"] .btn-primary:hover,
html[data-theme="matrix"] .btn-green:hover {
  background: #004400;
  box-shadow: 0 0 20px rgba(0,255,65,0.28);
}

html[data-theme="matrix"] input:focus,
html[data-theme="matrix"] select:focus {
  box-shadow: 0 0 0 3px rgba(0,255,65,0.15), 0 0 12px rgba(0,255,65,0.10);
}

/* Matrix scanline on cards */
html[data-theme="matrix"] .card,
html[data-theme="matrix"] .wizard-card {
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,255,65,0.015) 2px,
    rgba(0,255,65,0.015) 4px
  );
}

/* ── Matrix: Retirement Calculator hardcoded color overrides ── */
/* These classes have literal hex values in the file's own <style> block;
   html[] prefix gives us 0,1,1 specificity to beat the 0,1,0 class rule. */

html[data-theme="matrix"] .alert-blue {
  background: rgba(0,255,65,0.07) !important;
  border-color: rgba(0,255,65,0.32) !important;
  color: #00ff41 !important;
}
html[data-theme="matrix"] .alert-amber {
  background: rgba(255,255,0,0.07) !important;
  border-color: rgba(255,255,0,0.32) !important;
  color: #cccc00 !important;
}
html[data-theme="matrix"] .badge-blue,
html[data-theme="matrix"] .badge-green {
  background: rgba(0,255,65,0.12) !important;
  color: #00ff41 !important;
}
html[data-theme="matrix"] .badge-amber {
  background: rgba(255,255,0,0.10) !important;
  color: #cccc00 !important;
}
html[data-theme="matrix"] .badge-gray {
  background: rgba(0,255,65,0.06) !important;
  color: #008822 !important;
}
/* Ghost buttons (Upload Tax Tables, Download, IRS Tax Tables) */
html[data-theme="matrix"] .btn-ghost {
  background: rgba(0,255,65,0.09) !important;
  color: #00ff41 !important;
  border-color: rgba(0,255,65,0.35) !important;
}
html[data-theme="matrix"] .btn-ghost:hover {
  background: rgba(0,255,65,0.17) !important;
  box-shadow: 0 0 14px rgba(0,255,65,0.18);
}
/* Promotion-year row: no background highlight (badge only) */
/* Promo badge pill */
html[data-theme="matrix"] .promo-badge {
  background: rgba(0,255,65,0.18) !important;
  color: #00ff41 !important;
}
/* Table last-row total (success-bg → matrix tint) */
html[data-theme="matrix"] tbody tr:last-child td {
  background: rgba(0,255,65,0.07) !important;
}
/* Pension income cards */
html[data-theme="matrix"] .pension-income-item {
  background: rgba(0,255,65,0.07) !important;
  border-color: rgba(0,255,65,0.25) !important;
}
html[data-theme="matrix"] .pension-income-label,
html[data-theme="matrix"] .pension-income-amount {
  color: #00ff41 !important;
}
/* Purple metric value → matrix yellow */
html[data-theme="matrix"] .metric-value.purple {
  color: #cccc00 !important;
}
/* Summary strip */
html[data-theme="matrix"] #ddSummaryStrip {
  background: rgba(0,255,65,0.05) !important;
  border-color: rgba(0,255,65,0.20) !important;
  color: #00ff41 !important;
}

/* ═════════════════════════════════════════════════════════
   TERMINATOR — Complete override
   Black bg, phosphor red text, monospace font, red glow
   ═════════════════════════════════════════════════════════ */
:root[data-theme="terminator"] {
  --bg:               #000000;
  --surface:          #080000;  /* near-black — dark enough to contrast bright text */
  --surface-alt:      #100000;
  --text-primary:     #ff4422;  /* bright orange-red — high luminance on black */
  --text-secondary:   #cc3311;  /* mid red — still readable, visibly secondary */
  --text-muted:       #7a1a08;  /* muted but not invisible */
  --text:             #ff4422;
  --accent:           #ff4422;
  --accent-hover:     #ff6644;
  --accent-dim:       rgba(255,68,34,0.10);
  --accent-dim-hov:   rgba(255,68,34,0.18);
  --border:           #330800;  /* visible border on black */
  --border-focus:     #ff4422;
  --border-strong:    #551100;
  --input-bg:         #080000;
  --header-bg:        #100000;
  --header-text:      #ff4422;
  --header-text-dim:  rgba(255,68,34,0.55);
  --hero-text:        #ff4422;
  --hero-sub:         rgba(255,68,34,0.65);
  --badge-ready-bg:   rgba(255,68,34,0.12);
  --badge-ready-fg:   #ff4422;
  --badge-soon-bg:    rgba(255,160,0,0.10);
  --badge-soon-fg:    #dd9900;
  --success:          #ff4422;
  --success-bg:       rgba(255,68,34,0.09);
  --success-bd:       rgba(255,68,34,0.28);
  --danger:           #ff8866;
  --danger-bg:        rgba(255,136,102,0.09);
  --danger-bd:        rgba(255,136,102,0.28);
  --warn:             #ff9900;
  --warn-bg:          rgba(255,153,0,0.09);
  --warn-bd:          rgba(255,153,0,0.28);
  --shadow-sm:        0 0 8px rgba(255,68,34,0.18);
  --shadow-md:        0 0 20px rgba(255,68,34,0.22);
  --shadow-hover:     0 0 32px rgba(255,68,34,0.34);
  --surface2:         #100000;
  --btn-bg:           #2a0500;
  --btn-text:         #ff4422;
  color-scheme: dark;
}

html[data-theme="terminator"],
html[data-theme="terminator"] body,
html[data-theme="terminator"] input,
html[data-theme="terminator"] select,
html[data-theme="terminator"] button,
html[data-theme="terminator"] textarea {
  font-family: 'IBM Plex Mono', 'Courier New', 'Lucida Console', monospace;
}

html[data-theme="terminator"] .metric-value,
html[data-theme="terminator"] .hero-title,
html[data-theme="terminator"] .step-title,
html[data-theme="terminator"] .card-title {
  text-shadow: 0 0 14px rgba(255,68,34,0.60);
}

html[data-theme="terminator"] .card,
html[data-theme="terminator"] .wizard-card,
html[data-theme="terminator"] .metric-card {
  box-shadow: 0 0 16px rgba(255,68,34,0.12), inset 0 0 0 1px rgba(255,68,34,0.15);
  border-color: #330800;
}

/* Scanlines */
html[data-theme="terminator"] .card,
html[data-theme="terminator"] .wizard-card {
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255,68,34,0.022) 2px,
    rgba(255,68,34,0.022) 4px
  );
}

html[data-theme="terminator"] .btn-primary,
html[data-theme="terminator"] .btn-green {
  background: #2a0500;
  color: #ff4422;
  border: 1px solid #cc3311;
  box-shadow: 0 0 12px rgba(255,68,34,0.22);
}

html[data-theme="terminator"] .btn-primary:hover,
html[data-theme="terminator"] .btn-green:hover {
  background: #3d0800;
  box-shadow: 0 0 22px rgba(255,68,34,0.32);
}

html[data-theme="terminator"] input:focus,
html[data-theme="terminator"] select:focus {
  box-shadow: 0 0 0 3px rgba(255,68,34,0.18), 0 0 12px rgba(255,68,34,0.12);
}

html[data-theme="terminator"] .alert-blue {
  background: rgba(255,68,34,0.09) !important;
  border-color: rgba(255,68,34,0.38) !important;
  color: #ff4422 !important;
}
html[data-theme="terminator"] .alert-amber {
  background: rgba(255,153,0,0.09) !important;
  border-color: rgba(255,153,0,0.38) !important;
  color: #dd9900 !important;
}
html[data-theme="terminator"] .badge-blue,
html[data-theme="terminator"] .badge-green {
  background: rgba(255,68,34,0.14) !important;
  color: #ff4422 !important;
}
html[data-theme="terminator"] .badge-amber {
  background: rgba(255,153,0,0.12) !important;
  color: #dd9900 !important;
}
html[data-theme="terminator"] .badge-gray {
  background: rgba(255,68,34,0.08) !important;
  color: #cc3311 !important;
}
html[data-theme="terminator"] .btn-ghost {
  background: rgba(255,68,34,0.10) !important;
  color: #ff4422 !important;
  border-color: rgba(255,68,34,0.40) !important;
}
html[data-theme="terminator"] .btn-ghost:hover {
  background: rgba(255,68,34,0.20) !important;
  box-shadow: 0 0 14px rgba(255,68,34,0.22);
}
html[data-theme="terminator"] tbody tr:last-child td {
  background: rgba(255,68,34,0.09) !important;
}
html[data-theme="terminator"] .pension-income-item {
  background: rgba(255,68,34,0.09) !important;
  border-color: rgba(255,68,34,0.30) !important;
}
html[data-theme="terminator"] .pension-income-label,
html[data-theme="terminator"] .pension-income-amount {
  color: #ff4422 !important;
}
html[data-theme="terminator"] .metric-value.purple {
  color: #dd9900 !important;
}
html[data-theme="terminator"] #ddSummaryStrip {
  background: rgba(255,68,34,0.07) !important;
  border-color: rgba(255,68,34,0.24) !important;
  color: #ff4422 !important;
}
html[data-theme="terminator"] .promo-badge {
  background: rgba(255,68,34,0.20) !important;
  color: #ff4422 !important;
}

/* ═════════════════════════════════════════════════════════
   PHOSPHOR — Complete override
   Black bg, cyan/terminal-blue text, monospace, phosphor glow
   ═════════════════════════════════════════════════════════ */
:root[data-theme="phosphor"] {
  --bg:               #000000;
  --surface:          #001215;
  --surface-alt:      #001a20;
  --text-primary:     #00e5ff;
  --text-secondary:   #0097a7;
  --text-muted:       #005f70;
  --text:             #00e5ff;
  --accent:           #00e5ff;
  --accent-hover:     #40eeff;
  --accent-dim:       rgba(0,229,255,0.08);
  --accent-dim-hov:   rgba(0,229,255,0.14);
  --border:           #002830;
  --border-focus:     #00b8d4;
  --border-strong:    #003d4a;
  --input-bg:         #001215;
  --header-bg:        #001215;
  --header-text:      #00e5ff;
  --header-text-dim:  rgba(0,229,255,0.50);
  --hero-text:        #00e5ff;
  --hero-sub:         rgba(0,229,255,0.60);
  --badge-ready-bg:   rgba(0,229,255,0.10);
  --badge-ready-fg:   #00e5ff;
  --badge-soon-bg:    rgba(0,229,255,0.07);
  --badge-soon-fg:    #00b8d4;
  --success:          #00e5ff;
  --success-bg:       rgba(0,229,255,0.07);
  --success-bd:       rgba(0,229,255,0.22);
  --danger:           #ff6680;
  --danger-bg:        rgba(255,102,128,0.08);
  --danger-bd:        rgba(255,102,128,0.22);
  --warn:             #ffea00;
  --warn-bg:          rgba(255,234,0,0.07);
  --warn-bd:          rgba(255,234,0,0.22);
  --shadow-sm:        0 0 8px rgba(0,229,255,0.12);
  --shadow-md:        0 0 20px rgba(0,229,255,0.16);
  --shadow-hover:     0 0 32px rgba(0,229,255,0.26);
  --surface2:         #001215;
  --btn-bg:           #002830;
  --btn-text:         #00e5ff;
  color-scheme: dark;
}

html[data-theme="phosphor"],
html[data-theme="phosphor"] body,
html[data-theme="phosphor"] input,
html[data-theme="phosphor"] select,
html[data-theme="phosphor"] button,
html[data-theme="phosphor"] textarea {
  font-family: 'IBM Plex Mono', 'Courier New', 'Lucida Console', monospace;
}

html[data-theme="phosphor"] .metric-value,
html[data-theme="phosphor"] .hero-title,
html[data-theme="phosphor"] .step-title,
html[data-theme="phosphor"] .card-title {
  text-shadow: 0 0 12px rgba(0,229,255,0.55);
}

html[data-theme="phosphor"] .card,
html[data-theme="phosphor"] .wizard-card,
html[data-theme="phosphor"] .metric-card {
  box-shadow: 0 0 16px rgba(0,229,255,0.10), inset 0 0 0 1px rgba(0,229,255,0.12);
  border-color: #002830;
}

/* Phosphor scanlines */
html[data-theme="phosphor"] .card,
html[data-theme="phosphor"] .wizard-card {
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,229,255,0.015) 2px,
    rgba(0,229,255,0.015) 4px
  );
}

html[data-theme="phosphor"] .btn-primary,
html[data-theme="phosphor"] .btn-green {
  background: #002830;
  color: #00e5ff;
  border: 1px solid #00b8d4;
  box-shadow: 0 0 12px rgba(0,229,255,0.18);
}

html[data-theme="phosphor"] .btn-primary:hover,
html[data-theme="phosphor"] .btn-green:hover {
  background: #003a48;
  box-shadow: 0 0 20px rgba(0,229,255,0.28);
}

html[data-theme="phosphor"] input:focus,
html[data-theme="phosphor"] select:focus {
  box-shadow: 0 0 0 3px rgba(0,229,255,0.15), 0 0 12px rgba(0,229,255,0.10);
}

html[data-theme="phosphor"] .alert-blue {
  background: rgba(0,229,255,0.07) !important;
  border-color: rgba(0,229,255,0.32) !important;
  color: #00e5ff !important;
}
html[data-theme="phosphor"] .alert-amber {
  background: rgba(255,234,0,0.07) !important;
  border-color: rgba(255,234,0,0.32) !important;
  color: #ffea00 !important;
}
html[data-theme="phosphor"] .badge-blue,
html[data-theme="phosphor"] .badge-green {
  background: rgba(0,229,255,0.12) !important;
  color: #00e5ff !important;
}
html[data-theme="phosphor"] .badge-amber {
  background: rgba(255,234,0,0.10) !important;
  color: #ffea00 !important;
}
html[data-theme="phosphor"] .badge-gray {
  background: rgba(0,229,255,0.06) !important;
  color: #0097a7 !important;
}
html[data-theme="phosphor"] .btn-ghost {
  background: rgba(0,229,255,0.09) !important;
  color: #00e5ff !important;
  border-color: rgba(0,229,255,0.35) !important;
}
html[data-theme="phosphor"] .btn-ghost:hover {
  background: rgba(0,229,255,0.17) !important;
  box-shadow: 0 0 14px rgba(0,229,255,0.18);
}
html[data-theme="phosphor"] tbody tr:last-child td {
  background: rgba(0,229,255,0.07) !important;
}
html[data-theme="phosphor"] .pension-income-item {
  background: rgba(0,229,255,0.07) !important;
  border-color: rgba(0,229,255,0.25) !important;
}
html[data-theme="phosphor"] .pension-income-label,
html[data-theme="phosphor"] .pension-income-amount {
  color: #00e5ff !important;
}
html[data-theme="phosphor"] .metric-value.purple {
  color: #ffea00 !important;
}
html[data-theme="phosphor"] #ddSummaryStrip {
  background: rgba(0,229,255,0.05) !important;
  border-color: rgba(0,229,255,0.20) !important;
  color: #00e5ff !important;
}
html[data-theme="phosphor"] .promo-badge {
  background: rgba(0,229,255,0.18) !important;
  color: #00e5ff !important;
}
html[data-theme="phosphor"] .btn-next.accent {
  color: #000000 !important;
}


/* ═════════════════════════════════════════════════════════
   ARRAKIS — Complete override
   Black bg, warm cream/sandy text, monospace, golden glow
   ═════════════════════════════════════════════════════════ */
:root[data-theme="arrakis"] {
  --bg:               #000000;
  --surface:          #0d0a06;
  --surface-alt:      #120e08;
  --text-primary:     #e8d5b0;
  --text-secondary:   #c4a878;
  --text-muted:       #8a6840;
  --text:             #e8d5b0;
  --accent:           #e8d5b0;
  --accent-hover:     #f5e8cc;
  --accent-dim:       rgba(232,213,176,0.08);
  --accent-dim-hov:   rgba(232,213,176,0.14);
  --border:           #2a2010;
  --border-focus:     #d4b888;
  --border-strong:    #3d2e18;
  --input-bg:         #0d0a06;
  --header-bg:        #0d0a06;
  --header-text:      #e8d5b0;
  --header-text-dim:  rgba(232,213,176,0.50);
  --hero-text:        #e8d5b0;
  --hero-sub:         rgba(232,213,176,0.60);
  --badge-ready-bg:   rgba(232,213,176,0.10);
  --badge-ready-fg:   #e8d5b0;
  --badge-soon-bg:    rgba(255,200,100,0.08);
  --badge-soon-fg:    #d4a840;
  --success:          #e8d5b0;
  --success-bg:       rgba(232,213,176,0.07);
  --success-bd:       rgba(232,213,176,0.22);
  --danger:           #ff7755;
  --danger-bg:        rgba(255,119,85,0.08);
  --danger-bd:        rgba(255,119,85,0.22);
  --warn:             #ffcc44;
  --warn-bg:          rgba(255,204,68,0.07);
  --warn-bd:          rgba(255,204,68,0.22);
  --shadow-sm:        0 0 8px rgba(232,213,176,0.10);
  --shadow-md:        0 0 20px rgba(232,213,176,0.14);
  --shadow-hover:     0 0 32px rgba(232,213,176,0.22);
  --surface2:         #120e08;
  --btn-bg:           #2a2010;
  --btn-text:         #e8d5b0;
  color-scheme: dark;
}

html[data-theme="arrakis"],
html[data-theme="arrakis"] body,
html[data-theme="arrakis"] input,
html[data-theme="arrakis"] select,
html[data-theme="arrakis"] button,
html[data-theme="arrakis"] textarea {
  font-family: 'IBM Plex Mono', 'Courier New', 'Lucida Console', monospace;
}

html[data-theme="arrakis"] .metric-value,
html[data-theme="arrakis"] .hero-title,
html[data-theme="arrakis"] .step-title,
html[data-theme="arrakis"] .card-title {
  text-shadow: 0 0 14px rgba(232,213,176,0.40);
}

html[data-theme="arrakis"] .card,
html[data-theme="arrakis"] .wizard-card,
html[data-theme="arrakis"] .metric-card {
  box-shadow: 0 0 16px rgba(232,213,176,0.08), inset 0 0 0 1px rgba(232,213,176,0.10);
  border-color: #2a2010;
}

html[data-theme="arrakis"] .btn-primary,
html[data-theme="arrakis"] .btn-green {
  background: #2a2010;
  color: #e8d5b0;
  border: 1px solid #c4a878;
  box-shadow: 0 0 12px rgba(232,213,176,0.14);
}

html[data-theme="arrakis"] .btn-primary:hover,
html[data-theme="arrakis"] .btn-green:hover {
  background: #3d2e18;
  box-shadow: 0 0 20px rgba(232,213,176,0.22);
}

html[data-theme="arrakis"] input:focus,
html[data-theme="arrakis"] select:focus {
  box-shadow: 0 0 0 3px rgba(232,213,176,0.13), 0 0 12px rgba(232,213,176,0.08);
}

html[data-theme="arrakis"] .alert-blue {
  background: rgba(232,213,176,0.07) !important;
  border-color: rgba(232,213,176,0.32) !important;
  color: #e8d5b0 !important;
}
html[data-theme="arrakis"] .alert-amber {
  background: rgba(255,204,68,0.07) !important;
  border-color: rgba(255,204,68,0.32) !important;
  color: #ffcc44 !important;
}
html[data-theme="arrakis"] .badge-blue,
html[data-theme="arrakis"] .badge-green {
  background: rgba(232,213,176,0.12) !important;
  color: #e8d5b0 !important;
}
html[data-theme="arrakis"] .badge-amber {
  background: rgba(255,204,68,0.10) !important;
  color: #d4a840 !important;
}
html[data-theme="arrakis"] .badge-gray {
  background: rgba(232,213,176,0.06) !important;
  color: #c4a878 !important;
}
html[data-theme="arrakis"] .btn-ghost {
  background: rgba(232,213,176,0.09) !important;
  color: #e8d5b0 !important;
  border-color: rgba(232,213,176,0.35) !important;
}
html[data-theme="arrakis"] .btn-ghost:hover {
  background: rgba(232,213,176,0.17) !important;
  box-shadow: 0 0 14px rgba(232,213,176,0.16);
}
html[data-theme="arrakis"] tbody tr:last-child td {
  background: rgba(232,213,176,0.07) !important;
}
html[data-theme="arrakis"] .pension-income-item {
  background: rgba(232,213,176,0.07) !important;
  border-color: rgba(232,213,176,0.22) !important;
}
html[data-theme="arrakis"] .pension-income-label,
html[data-theme="arrakis"] .pension-income-amount {
  color: #e8d5b0 !important;
}
html[data-theme="arrakis"] .metric-value.purple {
  color: #ffcc44 !important;
}
html[data-theme="arrakis"] #ddSummaryStrip {
  background: rgba(232,213,176,0.05) !important;
  border-color: rgba(232,213,176,0.18) !important;
  color: #e8d5b0 !important;
}
html[data-theme="arrakis"] .promo-badge {
  background: rgba(232,213,176,0.18) !important;
  color: #e8d5b0 !important;
}
html[data-theme="arrakis"] .btn-next.accent {
  color: #1a1008 !important;
}


/* ═════════════════════════════════════════════════════════
   SEPIA — Warm parchment theme  (three modes via data-mode)
   Light (default) | Medium | Dark
   ═════════════════════════════════════════════════════════ */

/* ── Sepia Light (base / default) ─────────────────────── */
:root[data-theme="sepia"] {
  --bg:               #f4e8d0;
  --surface:          #fdf6e3;
  --surface-alt:      #ede0c4;
  --text-primary:     #3b2a1a;
  --text-secondary:   #6b4c2e;
  --text-muted:       #9a7455;
  --text:             #3b2a1a;
  --accent:           #8b5e3c;
  --accent-hover:     #6e4a2d;
  --accent-dim:       rgba(139,94,60,0.12);
  --accent-dim-hov:   rgba(139,94,60,0.22);
  --border:           #d4b896;
  --border-focus:     #8b5e3c;
  --border-strong:    #c4a07a;
  --input-bg:         #fdf6e3;
  --header-bg:        #3b2a1a;
  --header-text:      #f4e8d0;
  --header-text-dim:  rgba(244,232,208,0.60);
  --hero-text:        #f4e8d0;
  --hero-sub:         rgba(244,232,208,0.70);
  --badge-ready-bg:   rgba(60,100,40,0.11);
  --badge-ready-fg:   #3d6428;
  --badge-soon-bg:    rgba(139,94,60,0.12);
  --badge-soon-fg:    #7a5030;
  --success:          #4a7a34;
  --success-bg:       rgba(74,122,52,0.10);
  --success-bd:       rgba(74,122,52,0.22);
  --danger:           #b03020;
  --danger-bg:        rgba(176,48,32,0.10);
  --danger-bd:        rgba(176,48,32,0.22);
  --warn:             #8b6000;
  --warn-bg:          rgba(139,96,0,0.10);
  --warn-bd:          rgba(139,96,0,0.22);
  --shadow-sm:        0 1px 3px rgba(59,42,26,0.08), 0 2px 8px rgba(59,42,26,0.05);
  --shadow-md:        0 4px 18px rgba(59,42,26,0.10), 0 14px 36px rgba(59,42,26,0.07);
  --shadow-hover:     0 6px 20px rgba(59,42,26,0.14), 0 16px 40px rgba(59,42,26,0.09);
  --surface2:         #ede0c4;
  --btn-bg:           #3b2a1a;
  --btn-text:         #f4e8d0;
  color-scheme: light;
}

html[data-theme="sepia"],
html[data-theme="sepia"] body,
html[data-theme="sepia"] input,
html[data-theme="sepia"] select,
html[data-theme="sepia"] button,
html[data-theme="sepia"] textarea {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── Sepia Medium ──────────────────────────────────────── */
:root[data-theme="sepia"][data-mode="sepia-medium"] {
  --bg:               #d4b896;
  --surface:          #e8d5b0;
  --surface-alt:      #c8a880;
  --text-primary:     #2a1e10;
  --text-secondary:   #5c3d1e;
  --text-muted:       #8a6040;
  --text:             #2a1e10;
  --accent:           #6e4a2d;
  --accent-hover:     #55381e;
  --accent-dim:       rgba(110,74,45,0.14);
  --accent-dim-hov:   rgba(110,74,45,0.24);
  --border:           #b89068;
  --border-focus:     #6e4a2d;
  --border-strong:    #a07850;
  --input-bg:         #e8d5b0;
  --header-bg:        #2a1e10;
  --header-text:      #e8d5b0;
  --header-text-dim:  rgba(232,213,176,0.60);
  --hero-text:        #e8d5b0;
  --hero-sub:         rgba(232,213,176,0.70);
  --badge-ready-bg:   rgba(60,100,40,0.12);
  --badge-ready-fg:   #3d6428;
  --badge-soon-bg:    rgba(110,74,45,0.14);
  --badge-soon-fg:    #6e4a2d;
  --success:          #3d6428;
  --success-bg:       rgba(61,100,40,0.11);
  --success-bd:       rgba(61,100,40,0.24);
  --danger:           #952014;
  --danger-bg:        rgba(149,32,20,0.11);
  --danger-bd:        rgba(149,32,20,0.24);
  --warn:             #7a5000;
  --warn-bg:          rgba(122,80,0,0.11);
  --warn-bd:          rgba(122,80,0,0.24);
  --shadow-sm:        0 1px 3px rgba(42,30,16,0.10), 0 2px 8px rgba(42,30,16,0.07);
  --shadow-md:        0 4px 18px rgba(42,30,16,0.12), 0 14px 36px rgba(42,30,16,0.08);
  --shadow-hover:     0 6px 20px rgba(42,30,16,0.16), 0 16px 40px rgba(42,30,16,0.10);
  --surface2:         #c8a880;
  --btn-bg:           #2a1e10;
  --btn-text:         #e8d5b0;
  color-scheme: light;
}

/* ── Sepia Dark ────────────────────────────────────────── */
:root[data-theme="sepia"][data-mode="sepia-dark"] {
  --bg:               #1a1008;
  --surface:          #2a1e10;
  --surface-alt:      #1f1509;
  --text-primary:     #e8d5b0;
  --text-secondary:   #c4a878;
  --text-muted:       #8a6840;
  --text:             #e8d5b0;
  --accent:           #d4a868;
  --accent-hover:     #e8c080;
  --accent-dim:       rgba(212,168,104,0.12);
  --accent-dim-hov:   rgba(212,168,104,0.22);
  --border:           #3d2e1a;
  --border-focus:     #d4a868;
  --border-strong:    #553e25;
  --input-bg:         #2a1e10;
  --header-bg:        #0d0a04;
  --header-text:      #e8d5b0;
  --header-text-dim:  rgba(232,213,176,0.55);
  --hero-text:        #e8d5b0;
  --hero-sub:         rgba(232,213,176,0.65);
  --badge-ready-bg:   rgba(100,180,80,0.12);
  --badge-ready-fg:   #78c050;
  --badge-soon-bg:    rgba(212,168,104,0.14);
  --badge-soon-fg:    #d4a868;
  --success:          #78c050;
  --success-bg:       rgba(120,192,80,0.10);
  --success-bd:       rgba(120,192,80,0.24);
  --danger:           #e87060;
  --danger-bg:        rgba(232,112,96,0.10);
  --danger-bd:        rgba(232,112,96,0.24);
  --warn:             #d4a010;
  --warn-bg:          rgba(212,160,16,0.10);
  --warn-bd:          rgba(212,160,16,0.24);
  --shadow-sm:        0 1px 3px rgba(0,0,0,0.30), 0 2px 8px rgba(0,0,0,0.20);
  --shadow-md:        0 4px 18px rgba(0,0,0,0.35), 0 14px 36px rgba(0,0,0,0.25);
  --shadow-hover:     0 6px 20px rgba(0,0,0,0.45), 0 16px 40px rgba(0,0,0,0.32);
  --surface2:         #1f1509;
  --btn-bg:           #e8d5b0;
  --btn-text:         #1a1008;
  color-scheme: dark;
}

html[data-theme="sepia"] .alert-blue {
  background: rgba(139,94,60,0.10) !important;
  border-color: rgba(139,94,60,0.35) !important;
  color: #6b4c2e !important;
}
html[data-theme="sepia"] .alert-amber {
  background: rgba(139,96,0,0.10) !important;
  border-color: rgba(139,96,0,0.35) !important;
  color: #8b6000 !important;
}
html[data-theme="sepia"] .badge-blue,
html[data-theme="sepia"] .badge-green {
  background: rgba(74,122,52,0.12) !important;
  color: #3d6428 !important;
}
html[data-theme="sepia"] .badge-amber {
  background: rgba(139,96,0,0.12) !important;
  color: #8b6000 !important;
}
html[data-theme="sepia"] .badge-gray {
  background: rgba(139,94,60,0.08) !important;
  color: #9a7455 !important;
}
html[data-theme="sepia"] .btn-ghost {
  background: rgba(139,94,60,0.08) !important;
  color: #6b4c2e !important;
  border-color: rgba(139,94,60,0.35) !important;
}
html[data-theme="sepia"] .btn-ghost:hover {
  background: rgba(139,94,60,0.16) !important;
}
html[data-theme="sepia"] .metric-value.purple {
  color: #7a5030 !important;
}


/* Windows 95: the "Baked Fresh Daily" label sits on the teal desktop or the
   blue title-bar hero, where navy is hard to read */
html[data-theme="windows-95"] :is(.hero-eyebrow, .page-eyebrow) {
  color: #ffffff;
}

/* Windows 95 picker button: flat style */
html[data-theme="windows-95"] #pfs-theme-btn,
html[data-theme="windows-95"] #pfs-home-btn,
html[data-theme="windows-95"] #pfs-about-btn {
  border-radius: 0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
}

html[data-theme="windows-95"] #pfs-theme-panel {
  border-radius: 0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
}


/* ═════════════════════════════════════════════════════════
   CROSS-THEME FIXES FOR PAGE-SPECIFIC TOKENS
   ═════════════════════════════════════════════════════════ */

/* Compound Interest, Inflation, Loan, Savings Goal, Credit Card Payoff and
   Debt Payoff (the .page-wrap pages) colour their cards, text and inputs with
   --card-bg / --fg / --inp-bg, which only the base :root defines, so every
   other theme showed white cards and a navy title. Map them onto each
   theme's own tokens. */
:root[data-theme],
:root[data-mode] {
  --card-bg: var(--surface);
  --fg:      var(--text-primary);
  --inp-bg:  var(--input-bg);
}

/* Those pages also use --hero-sub as their general muted-text colour, on the
   page background and inside cards. --hero-sub is meant for text on the dark
   Hub hero, so on light themes (Sepia) it was near-invisible. */
html:is([data-theme], [data-mode]) .page-wrap {
  --hero-sub: var(--text-secondary);
}
/* ...except inside their results header, which sits on --btn-bg */
html:is([data-theme], [data-mode]) .page-wrap .results-hdr {
  --hero-sub: color-mix(in srgb, var(--btn-text) 62%, transparent);
}

/* Terminal themes: brighter muted text, and a dark halo so the text above
   the cards stays readable over Matrix rain / Terminator HUD */
html:is([data-theme="matrix"], [data-theme="terminator"], [data-theme="phosphor"], [data-theme="arrakis"]) .page-wrap {
  --hero-sub: color-mix(in srgb, var(--text-primary) 78%, transparent);
}
html:is([data-theme="matrix"], [data-theme="terminator"], [data-theme="phosphor"], [data-theme="arrakis"])
  :is(.hero-eyebrow, .hero-title, .hero-sub, .step-lbl) {
  text-shadow: 0 0 4px #000, 0 0 10px #000;
}

/* Bright accent fills (Continue button, active step, chip hover, active
   toggle buttons, winner badge) had white text, which is unreadable on neon
   green / cyan / sand; use near-black */
html:is([data-theme="matrix"], [data-theme="terminator"], [data-theme="phosphor"])
  :is(.btn-next.accent, .step-circle.active, .step-circle.done, .chip:hover,
      .strat-btn.active, .mode-btn.active, .compound-btn.active, .freq-btn.active,
      .filing-btn.active, .promo-type-btn.active, .winner-badge) {
  color: #000000 !important;
}
html[data-theme="arrakis"]
  :is(.btn-next.accent, .step-circle.active, .step-circle.done, .chip:hover,
      .strat-btn.active, .mode-btn.active, .compound-btn.active, .freq-btn.active,
      .filing-btn.active, .promo-type-btn.active, .winner-badge),
html[data-theme="sepia"][data-mode="sepia-dark"]
  :is(.btn-next.accent, .step-circle.active, .step-circle.done, .chip:hover,
      .strat-btn.active, .mode-btn.active, .compound-btn.active, .freq-btn.active,
      .filing-btn.active, .promo-type-btn.active, .winner-badge) {
  color: #1a1008 !important;
}

/* Default + Dark: the Hub hero and results headers have a hard-coded amber
   glow; tint it indigo to match the palette */
html[data-mode="dark"]:not([data-theme]) .hero::before {
  background:
    radial-gradient(ellipse 70% 60% at 50% -10%, rgba(129,140,248,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 90%, rgba(129,140,248,0.06) 0%, transparent 50%);
}
html[data-mode="dark"]:not([data-theme]) :is(.results-hero, .results-hdr)::before {
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(129,140,248,0.18) 0%, transparent 65%);
}
html[data-mode="dark"]:not([data-theme]) :is(.net-box.even, .combined-row.total) {
  border-color: rgba(129,140,248,0.25);
}

/* Default + Dark: indigo accent fills get near-black text, like the mockup */
html[data-mode="dark"]:not([data-theme])
  :is(.btn-next.accent, .step-circle.active, .step-circle.done, .chip:hover,
      .strat-btn.active, .mode-btn.active, .compound-btn.active, .freq-btn.active,
      .filing-btn.active, .promo-type-btn.active, .winner-badge) {
  color: #0b0c0f !important;
}

/* Page titles on the terminal themes use the Hub's "Your Complete
   Financial Picture" font (Inter) instead of the theme's monospace */
html:is([data-theme="matrix"], [data-theme="terminator"], [data-theme="phosphor"], [data-theme="arrakis"]) :is(.hero-title, .header-title) {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-weight: 600;
}

/* Results-header figures (Net Worth, Take Home Pay, Budget) are hard-coded
   green / red / orange for a navy header. On the terminal themes use the
   theme's own palette instead (e.g. no green on Terminator). */
html:is([data-theme="matrix"], [data-theme="terminator"], [data-theme="phosphor"], [data-theme="arrakis"])
  :is(.results-hero, .results-hdr) :is(.positive, .assets, .net, .surplus) {
  color: var(--success);
}
html:is([data-theme="matrix"], [data-theme="terminator"], [data-theme="phosphor"], [data-theme="arrakis"])
  :is(.results-hero, .results-hdr) :is(.negative, .liabs, .deficit, .cost) {
  color: var(--danger);
}
html:is([data-theme="matrix"], [data-theme="terminator"], [data-theme="phosphor"], [data-theme="arrakis"])
  :is(.results-hero, .results-hdr) :is(.taxes, .outgo) {
  color: var(--warn);
}

/* ...and the same for Net Worth's assets bar and Take Home Pay's green
   "Send to Budget" banner */
html:is([data-theme="matrix"], [data-theme="terminator"], [data-theme="phosphor"], [data-theme="arrakis"]) .nw-bar-fill.positive {
  background: var(--success);
}
html:is([data-theme="matrix"], [data-theme="terminator"], [data-theme="phosphor"], [data-theme="arrakis"]) .nw-bar-fill.negative {
  background: var(--danger);
}
html:is([data-theme="matrix"], [data-theme="terminator"], [data-theme="phosphor"], [data-theme="arrakis"]) .send-to-budget {
  background: var(--btn-bg);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
}

/* Sepia: results headers sit on --btn-bg, which is light in Sepia Dark, so
   derive their muted text from the header's own text colour */
html[data-theme="sepia"] :is(.results-hero, .results-hdr) {
  --hero-sub: color-mix(in srgb, var(--btn-text) 65%, transparent);
}


/* ═════════════════════════════════════════════════════════
   WIDGET — Floating buttons + theme picker panel
   ═════════════════════════════════════════════════════════ */

/* ── Shared floating button base ─────────────────────────── */
#pfs-theme-btn,
#pfs-home-btn,
#pfs-about-btn {
  position: fixed;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--header-bg, #0e1c32);
  border: 1.5px solid var(--border, rgba(255,255,255,0.15));
  color: var(--header-text, #ece9e3);
  cursor: pointer;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.20));
  transition: transform 0.15s, box-shadow 0.15s;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
}

#pfs-theme-btn { right: 20px; }
#pfs-home-btn  { right: 72px; }  /* 20 + 44 + 8 gap */
#pfs-about-btn { right: 124px; } /* left of Home */

#pfs-theme-btn:hover,
#pfs-home-btn:hover,
#pfs-about-btn:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-hover, 0 8px 24px rgba(0,0,0,0.28));
}
#pfs-theme-btn:active,
#pfs-home-btn:active,
#pfs-about-btn:active { transform: scale(0.96); }

/* Mode badge pip on theme button */
.pfs-btn-icon { display: flex; align-items: center; justify-content: center; }
.pfs-mode-pip {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--header-bg, #0e1c32);
  border: 1.5px solid var(--header-text, #ece9e3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--header-text, #ece9e3);
}
#pfs-theme-btn { position: fixed; } /* ensure relative context for pip */

/* ── Picker panel ────────────────────────────────────────── */
/* Override any theme-level font-family rules (e.g. Sepia sets Georgia on html/body/button).
   #pfs-theme-panel has ID specificity (1,0,0); adding a child element beats (0,1,2). */
#pfs-theme-panel,
#pfs-theme-panel button,
#pfs-theme-panel input,
#pfs-theme-panel select,
#pfs-theme-panel textarea,
#pfs-theme-panel * {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

#pfs-theme-panel {
  position: fixed;
  bottom: 72px;
  right: 20px;
  width: 270px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  box-shadow: var(--shadow-md, 0 8px 28px rgba(0,0,0,0.18));
  z-index: 9998;
  padding: 14px 12px;
  display: none;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  animation: pfs-panel-in 0.18s ease;
}
#pfs-theme-panel.open { display: block; }

@keyframes pfs-panel-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Panel title */
#pfs-theme-panel-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

/* Section labels (Theme / Mode) */
.pfs-section-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted, #9ca3af);
  margin: 8px 0 4px 4px;
}

/* Divider between sections */
.pfs-picker-divider {
  height: 1px;
  background: var(--border, #e5e7eb);
  margin: 8px 0;
}

/* ── Rows (both theme and mode) ──────────────────────────── */
.pfs-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, opacity 0.12s;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-primary, #111827);
}
.pfs-row:hover:not([disabled]) {
  background: var(--accent-dim, rgba(0,0,0,0.05));
}
.pfs-row.active {
  background: var(--accent-dim, rgba(37,99,235,0.10));
  font-weight: 600;
}
.pfs-row.active::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #2563eb);
  margin-left: auto;
  flex-shrink: 0;
}
.pfs-row.disabled,
.pfs-row[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Swatch circle */
.pfs-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── Number inputs: no up/down spinner arrows on any page ── */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }