/*
 * Flare — shared theme overrides
 *
 * Three layers, in cascade order:
 *   1. ALWAYS-ON dark contrast bumps  (default tokens get tweaked)
 *   2. @media (prefers-color-scheme: light)  → auto light when OS says so
 *   3. [data-theme="light|dark"] on <html>  → user override (set by
 *      theme-toggle.js) wins over the media query
 *
 * Linked AFTER each page's inline <style> so the cascade lets these
 * rules override the page-level :root tokens.
 */

/* ── 1. Dark-theme contrast bumps (default) ────────────────────────────── */
:root {
  --text-dim:    #6a82a3;   /* was #324560 — unreadably dark */
  --text:        #94aecc;   /* was #7a9cc0 */
  --text-md:     #b3c7e0;   /* was #9ab4d0 */
}

/* ── 2 & 3. Light tokens — applied either by OS preference OR explicit
        data-theme="light" override. Shared block via :is() for DRYness. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { color-scheme: light; }
}
:root[data-theme="light"] { color-scheme: light; }

/* The actual light palette — applied via either selector. We duplicate
   the block under both because CSS doesn't let us OR a media query
   with a selector cleanly. */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg0:    #f6f8fc;
    --bg1:    #ffffff;
    --bg2:    #f1f5f9;
    --bg3:    #e2e8f0;
    --bg4:    #cbd5e1;
    --border:  #e2e8f0;
    --border2: #cbd5e1;
    --text-bright: #0f172a;
    --text-md:     #334155;
    --text:        #475569;
    --text-dim:    #64748b;
    --green:   #00a85a;
    --red:     #d62649;
    --amber:   #b45309;
    --blue:    #0284c7;
    --purple:  #7c3aed;
  }
}
:root[data-theme="light"] {
  --bg0:    #f6f8fc;
  --bg1:    #ffffff;
  --bg2:    #f1f5f9;
  --bg3:    #e2e8f0;
  --bg4:    #cbd5e1;
  --border:  #e2e8f0;
  --border2: #cbd5e1;
  --text-bright: #0f172a;
  --text-md:     #334155;
  --text:        #475569;
  --text-dim:    #64748b;
  --green:   #00a85a;
  --red:     #d62649;
  --amber:   #b45309;
  --blue:    #0284c7;
  --purple:  #7c3aed;
}

/* Explicit dark override — wins over the media query if user toggled to dark
   while their OS is light. Keeps the original dark palette tokens. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg0:#040810; --bg1:#080e1c; --bg2:#0c1525; --bg3:#10192e; --bg4:#162035;
  --border:#1a2840; --border2:#223355;
  --green:#00e87a; --red:#ff2d5a; --amber:#ffb01a; --blue:#00aaff; --purple:#a855f7;
  --text-bright:#c8daf0; --text-md:#b3c7e0; --text:#94aecc; --text-dim:#6a82a3;
}

/* ── Light-mode component overrides ─────────────────────────────────────
   These targeted rules clean up hardcoded hex literals that were tuned
   for the dark theme. We need both the @media path AND the explicit
   [data-theme="light"] path for full coverage. */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) html,
  :root:not([data-theme="dark"]) body {
    background: var(--bg0);
    color: var(--text-bright);
  }
}
html[data-theme="light"], html[data-theme="light"] body {
  background: var(--bg0) !important;
  color: var(--text-bright) !important;
}

/* Light-mode shared component fixes (apply via attribute selector so they
   work for both auto-light and explicit-light) */
html[data-theme="light"] .left-nav,
html[data-theme="light"] .app > header,
html[data-theme="light"] .nav-back {
  background: var(--bg1);
  border-color: var(--border);
}
html[data-theme="light"] .nav-item.active {
  background: var(--bg2);
  color: var(--text-bright);
}
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .modal-confirm.buy,
html[data-theme="light"] .btn-red,
html[data-theme="light"] .modal-confirm.sell,
html[data-theme="light"] .btn-blue,
html[data-theme="light"] .btn-teal,
html[data-theme="light"] .btn-continue,
html[data-theme="light"] .rk-continue {
  color: #ffffff !important;
}
html[data-theme="light"] .modal-bg,
html[data-theme="light"] .modal-backdrop {
  background: rgba(15, 23, 42, 0.45) !important;  /* lighter scrim */
}
html[data-theme="light"] code,
html[data-theme="light"] .form-input.mono,
html[data-theme="light"] .field-input.mono,
html[data-theme="light"] .editable {
  background: var(--bg2);
  color: var(--text-bright);
}
html[data-theme="light"] .stat-chip,
html[data-theme="light"] .status-pill,
html[data-theme="light"] .rk-display {
  background: var(--bg2) !important;
  color: var(--text-md) !important;
}
html[data-theme="light"] .pricing-card.featured {
  background: linear-gradient(180deg, rgba(0,168,90,0.06), transparent);
}
html[data-theme="light"] .accordion,
html[data-theme="light"] .accordion-header:hover {
  background: var(--bg1);
}
html[data-theme="light"] .accordion-header:hover {
  background: var(--bg2);
}
html[data-theme="light"] .toggle-track,
html[data-theme="light"] .auto-toggle-track {
  background: var(--bg3);
}

/* Same component overrides via @media path (matches when user is on
   "auto" AND OS is light — i.e. no explicit data-theme set) */
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .left-nav,
  html:not([data-theme="dark"]) .app > header,
  html:not([data-theme="dark"]) .nav-back {
    background: var(--bg1);
    border-color: var(--border);
  }
  html:not([data-theme="dark"]) .nav-item.active {
    background: var(--bg2);
    color: var(--text-bright);
  }
  html:not([data-theme="dark"]) .btn-primary,
  html:not([data-theme="dark"]) .modal-confirm.buy,
  html:not([data-theme="dark"]) .btn-red,
  html:not([data-theme="dark"]) .modal-confirm.sell,
  html:not([data-theme="dark"]) .btn-blue,
  html:not([data-theme="dark"]) .btn-teal,
  html:not([data-theme="dark"]) .btn-continue,
  html:not([data-theme="dark"]) .rk-continue {
    color: #ffffff !important;
  }
  html:not([data-theme="dark"]) .modal-bg,
  html:not([data-theme="dark"]) .modal-backdrop {
    background: rgba(15, 23, 42, 0.45) !important;
  }
  html:not([data-theme="dark"]) code,
  html:not([data-theme="dark"]) .form-input.mono,
  html:not([data-theme="dark"]) .field-input.mono,
  html:not([data-theme="dark"]) .editable {
    background: var(--bg2);
    color: var(--text-bright);
  }
  html:not([data-theme="dark"]) .stat-chip,
  html:not([data-theme="dark"]) .status-pill,
  html:not([data-theme="dark"]) .rk-display {
    background: var(--bg2) !important;
    color: var(--text-md) !important;
  }
  html:not([data-theme="dark"]) .toggle-track,
  html:not([data-theme="dark"]) .auto-toggle-track {
    background: var(--bg3);
  }
}

/* Theme-toggle pill (#flare-theme) inherits tokens — no extra rules needed */

/* ── Marketing-page (welcome.html) header — a direct child of <body>,
       hardcoded a dark rgba scrim that became unreadable in light mode.
       Override via the same dual selector pattern. */
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) body > header {
    background: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1px solid var(--border) !important;
  }
  html:not([data-theme="dark"]) body > header .brand {
    color: var(--text-bright) !important;
  }
  html:not([data-theme="dark"]) body > header .btn-ghost {
    color: var(--text-md) !important;
    border-color: var(--border2) !important;
  }
  html:not([data-theme="dark"]) body > header .btn-ghost:hover {
    background: var(--bg2) !important;
    color: var(--text-bright) !important;
  }
}
html[data-theme="light"] body > header {
  background: rgba(255, 255, 255, 0.85) !important;
  border-bottom: 1px solid var(--border) !important;
}
html[data-theme="light"] body > header .brand {
  color: var(--text-bright) !important;
}
html[data-theme="light"] body > header .btn-ghost {
  color: var(--text-md) !important;
  border-color: var(--border2) !important;
}
html[data-theme="light"] body > header .btn-ghost:hover {
  background: var(--bg2) !important;
  color: var(--text-bright) !important;
}

/* Marketing-page hero: the gradient-text accent ("before") on .hero h1
   reads on either bg, but everything else needs token-driven defaults
   which they already have. The disclaimer and FAQ details inherit too. */
