/* Soar — theme tokens for dark and light.
   ---------------------------------------------------------------------------
   Every page consumes these; no page should hardcode a colour again.

   Resolution order:
     1. html[data-theme="light|dark"]  — an explicit choice, remembered in localStorage
     3. dark                           — the fallback, since that's the brand's home

   Light is DESIGNED, not inverted. Two things a naive flip gets wrong:

   - The brand amber (#F5A524) is a light colour. On a light background it fails
     contrast badly as text (~2:1 against paper). So the accent is split: --accent
     stays the brand colour for fills and buttons, and --accent-text is a darkened
     amber used only where the accent carries text. Both read as the same brand.
   - Borders can't just flip alpha. On dark, a white 8% line reads as a soft edge; the
     same trick with black on light reads as dirt. Light uses a warmer, tighter line. */

:root {
  --amber:      #F5A524;
  --ember:      #FB7233;
  --green:      #34D399;
  --disp: "Space Grotesk", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --ease: cubic-bezier(.2,.6,.2,1);
  --on-solid: #ffffff;   /* text on a saturated fill — never flips */
  color-scheme: dark;
}

/* ── Dark (default) ──────────────────────────────────────────────────────── */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink:         #070809;
  --bg:          #080c10;
  --panel:       #0d0f12;
  --panel-2:     #111419;
  --card:        rgba(255,255,255,.04);
  --card-brd:    rgba(255,255,255,.09);
  --line:        rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.14);
  --txt:         #e9e7e2;
  --txt-body:    rgba(255,255,255,.72);
  --txt-dim:     rgba(255,255,255,.45);
  --accent:      #F5A524;
  --accent-text: #F5A524;
  --accent-ink:  #080c10;   /* text sitting ON the accent */
  --accent-soft: rgba(245,158,11,.14);
  --shadow:      0 18px 50px rgba(0,0,0,.45);
  /* Status colours. Pale mint and pale gold read well on near-black and are unreadable
     on paper, so they are tokens rather than literals. */
  --ok-bg:       rgba(34,197,94,.13);
  --ok-text:     #6ee7a0;
  --warn-bg:     rgba(245,158,11,.14);
  --warn-text:   #fcd34d;
}

/* ── Light ───────────────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  color-scheme: light;
  --ink:         #f7f5f0;   /* page background — NOT the text colour; index.html uses it as background */
  --bg:          #f7f5f0;
  --panel:       #ffffff;
  --panel-2:     #fbfaf7;
  --card:        #ffffff;
  --card-brd:    rgba(23,19,11,.11);
  --line:        rgba(23,19,11,.10);
  --line-strong: rgba(23,19,11,.18);
  --txt:         #17130b;
  --txt-body:    rgba(23,19,11,.76);
  --txt-dim:     rgba(23,19,11,.52);
  --accent:      #F5A524;
  --accent-text: #9A6200;   /* darkened: the brand amber fails contrast as text here */
  --accent-ink:  #17130b;
  --accent-soft: rgba(245,158,11,.16);
  --shadow:      0 14px 40px rgba(23,19,11,.10);
  --ok-bg:       rgba(21,128,61,.12);
  --ok-text:     #15803d;
  --warn-bg:     rgba(146,97,10,.14);
  --warn-text:   #92610a;
}

/* The theme switcher was removed, so the site is dark, full stop. Following
   prefers-color-scheme here would hand a light-mode visitor a theme with no
   control to leave it. The light tokens above stay defined but unreachable —
   re-adding a toggle is all it takes to bring them back. */

/* ── The toggle ──────────────────────────────────────────────────────────── */
/* One button, two glyphs, showing the theme the click will GIVE you rather than the one
   you're in — the button describes its action, which is what a control should do.
   So: dark now → sun (click for light); light now → moon (click for dark). */

/* Suppress transitions during a theme switch. Without this every colour on the page
   animates at once, which looks like a fault rather than a change. */
:root.theme-switching, :root.theme-switching * {
  transition: none !important;
}

/* Floating fallback, mounted by theme.js on pages with no nav to host the button.
   Bottom-left so it can't collide with a cookie banner or a chat widget. */