/* ============================================================
   ClaimFast website — dark mode + the Light / Auto / Dark switch.
   Shared by every page on claimfast.app (EN, ES, privacy, terms).

   The same three states as the app (app/src/app/globals.css, 2026-09-27):
     no attribute       → follow the operating system (Auto, the default)
     data-theme="dark"  → dark, whatever the OS says
     data-theme="light" → light, whatever the OS says
   The choice lives in localStorage under "claimfast.theme" and an inline
   script in each page's <head> applies it BEFORE first paint, so a saved Dark
   never flashes white. (claimfast.app and app.claimfast.app are different
   origins, so the site and the app each remember their own choice.)

   The palette is the APP'S palette, value for value, so the two read as one
   product: a neutral grey-black stage where Trust Blue is the only colour in
   the room. It is written ONCE as --dk-* and assigned in the two places that
   can turn dark on, so those two paths can never drift apart.

   Brand: Trust Blue #0B5FFF stays the FILLED colour in both modes
   (--primary-solid; white on it is 5.1:1). Blue TEXT (--primary) brightens on
   dark, where #0B5FFF would only reach 3.3:1.
   ============================================================ */
:root{
  --dk-bg:#121316;
  --dk-bg-alt:#16181c;        /* alternating sections: a half-step off the stage */
  --dk-surface:#1a1c20;
  --dk-ink:#f2f4f8;           /* headings — 15.5:1 on a card */
  --dk-text:#c6ccd8;          /* body — 10.6:1 */
  --dk-muted:#979eac;         /* 6.3:1 — readable, not decorative */
  --dk-border:#262a35;        /* the trim carries the faintest blue */
  --dk-border-strong:#363d4d;
  --dk-primary:#6f9dff;       /* blue text/borders — 6.5:1 on a card */
  --dk-primary-600:#2f6bff;   /* the hover FILL */
  --dk-primary-soft:#1c2434;  /* the pale blue badge, inverted */
  --dk-band-ink:#0e1830;      /* the privacy band: still the page's one deep-navy moment */
  --dk-live-ink:#45c07a;
  --dk-live-bg:#132a1d;
  --dk-live-border:#1f4430;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:var(--dk-bg);--bg-alt:var(--dk-bg-alt);--surface:var(--dk-surface);
    --ink:var(--dk-ink);--text:var(--dk-text);--muted:var(--dk-muted);
    --border:var(--dk-border);--border-strong:var(--dk-border-strong);
    --primary:var(--dk-primary);--primary-600:var(--dk-primary-600);--primary-soft:var(--dk-primary-soft);
    --accent:var(--dk-primary);--accent-soft:var(--dk-primary-soft);
    --ring:rgba(111,157,255,.35);
    --shadow-color:220 40% 2%;
    --hero-glow:radial-gradient(60% 70% at 80% 0%,rgba(47,107,255,.16) 0%,transparent 60%),
                radial-gradient(50% 60% at 0% 20%,rgba(47,107,255,.07) 0%,transparent 55%);
    --band-ink:var(--dk-band-ink);
    --live-ink:var(--dk-live-ink);--live-bg:var(--dk-live-bg);--live-border:var(--dk-live-border);
    --pc-lift:45%;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:var(--dk-bg);--bg-alt:var(--dk-bg-alt);--surface:var(--dk-surface);
  --ink:var(--dk-ink);--text:var(--dk-text);--muted:var(--dk-muted);
  --border:var(--dk-border);--border-strong:var(--dk-border-strong);
  --primary:var(--dk-primary);--primary-600:var(--dk-primary-600);--primary-soft:var(--dk-primary-soft);
  --accent:var(--dk-primary);--accent-soft:var(--dk-primary-soft);
  --ring:rgba(111,157,255,.35);
  --shadow-color:220 40% 2%;
  --hero-glow:radial-gradient(60% 70% at 80% 0%,rgba(47,107,255,.16) 0%,transparent 60%),
              radial-gradient(50% 60% at 0% 20%,rgba(47,107,255,.07) 0%,transparent 55%);
  --band-ink:var(--dk-band-ink);
  --live-ink:var(--dk-live-ink);--live-bg:var(--dk-live-bg);--live-border:var(--dk-live-border);
  --pc-lift:45%;
  color-scheme:dark;
}
:root[data-theme="light"]{color-scheme:light}

/* ---- The switch: ☀ Light · ◐ Auto · ☾ Dark, the app's own control ---- */
.theme-switch{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--border);border-radius:999px;background:var(--surface)}
.theme-switch button{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:0;border-radius:999px;
  background:transparent;color:var(--muted);font:600 .78rem/1 var(--font-body,system-ui,sans-serif);
  cursor:pointer;transition:color .15s ease,background-color .15s ease;
}
.theme-switch button:hover{color:var(--primary)}
.theme-switch button[aria-checked="true"]{background:var(--primary-soft);color:var(--primary)}
.theme-switch button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.theme-switch [aria-hidden]{font-size:.9rem}