/* Shared design tokens: color, type, spacing, radius. One source for the whole app shell.
   Light is the primary theme (CLAUDE.md: "Light theme primary, dark mode supported"). The theme
   is chosen by a `data-theme` attribute on <html> — "light" | "dark" | "auto" — set as early as
   possible by the inline script in index.html's <head> to avoid a flash of the wrong theme, and
   changed at runtime via app/util.js's setTheme(). "auto" follows the OS via prefers-color-scheme;
   this attribute-based approach (ported from putting/index.html's original picker, now shared by
   the whole app instead of putting only) is what makes a manual override possible at all — a bare
   `@media (prefers-color-scheme: dark)` query alone can't be overridden by an in-app toggle.
   Fairway and weight colors match CLAUDE.md's documented brand palette (weight light #C99A0E,
   medium #2F6FB5, heavy #C8372D) except fairway green, which follows index.html's already-shipped
   "Version 1.4: David Golfs brand refresh" value (#0B6936) rather than CLAUDE.md's older
   #174A32 note — CLAUDE.md has been updated to match. Typography keeps that same brand refresh
   (Playfair Display / Lato / Montserrat). */
:root,
:root[data-theme="light"]{
  --bg:#F8FAF7; --paper:#FFFFFF; --ink:#26382C; --muted:#69736C; --line:#DDE6DD;
  --fairway:#0B6936; --fairway-ink:#FFFFFF; --c-driver:#0B6936; --on-driver:#FFFFFF;
  --c-light:#C99A0E; --c-medium:#2F6FB5; --c-heavy:#C8372D;
  --on-light:#13261B; --on-medium:#FFFFFF; --on-heavy:#FFFFFF;
  --danger:#B42318; --warn:#9A6B00;
  --heat:#E8B339; --heat-good:#7CCB9B; --mat:#CFE3D5;
  --c-near:#2F6FB5; --c-mid:#C99A0E; --c-far:#A4477D;
  --cat-6:#13827F; --cat-7:#6B4FB8; /* round 33: category dots 6 and 7 (teal, violet) */
  /* Putt-type badges (round 9): each pair checked for text contrast — aim 7.0:1, distance 6.1:1
     here; aim 11.3:1, distance 9.4:1 in dark. The old aim badge was dark text on --c-near (3.1:1). */
  --badge-aim-bg:#1F5A99; --badge-aim-ink:#FFFFFF; --badge-dist-bg:#C99A0E; --badge-dist-ink:#13261B;
  --badge-bonus-bg:#9C2A7A; --badge-bonus-ink:#FFFFFF; /* round 46: a bonus putt's band (berry, 6.9:1; 9.8:1 in dark), not a putt type's */
  /* Non-dominant stripe per weight color (round 10). Always pushed *away* from that weight's text
     color — white stripes where the text is dark, black where it's white — so a stripe can only
     raise text contrast, never lower it. Checked: stripe vs band 1.32–1.64:1 on all four weights
     in both themes; text over a stripe is higher contrast than over the plain band everywhere. */
  --nds-L:rgba(255,255,255,.35); --nds-M:rgba(0,0,0,.25); --nds-H:rgba(0,0,0,.25); --nds-D:rgba(0,0,0,.25);
  /* Hands-free mode (round 26): a violet no drill uses for anything else — not a weight, a putt type
     or the brand green — so the frame and banner read as "hands-free" at a glance. Text 10.6:1 here,
     11.9:1 in dark. */
  --hf:#5B2A86; --on-hf:#FFFFFF;
  --cond:"Playfair Display",Georgia,serif;
  --body:"Lato",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ui:"Montserrat",sans-serif;
  --r-sm:8px; --r-md:16px;
  /* Spacing scale — see docs/DESIGN_SYSTEM.md. New code should use these; a lot of pre-existing
     CSS still has ad-hoc pixel values the audit found and didn't have time to migrate. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
}
:root[data-theme="dark"]{
  --bg:#0E1812; --paper:#15231A; --ink:#E4ECE5; --muted:#98AB9D; --line:#294033;
  --fairway:#2F7D55; --c-driver:#6CC495; --on-driver:#0E1812;
  --c-medium:#4D8FD6; --c-heavy:#E0544A;
  --danger:#F0776C; --warn:#E8B339;
  --heat:#B8771E; --heat-good:#2F7D55; --mat:#1B3A2A;
  --c-near:#5AA9E6; --c-mid:#E8B339; --c-far:#D96AA7;
  --cat-6:#3FBDB8; --cat-7:#A58BEA;
  --badge-aim-bg:#A9D1F5; --badge-aim-ink:#0E1812; --badge-dist-bg:#E8B339; --badge-dist-ink:#0E1812; --badge-bonus-bg:#F2A7DD; --badge-bonus-ink:#0E1812;
  --on-medium:#0E1812; --on-heavy:#0E1812; /* round 11: white was 3.4:1 / 3.8:1 here; dark text is 5.4:1 / 4.8:1 */
  --nds-M:rgba(255,255,255,.35); --nds-H:rgba(255,255,255,.35); --nds-D:rgba(255,255,255,.35); /* stripes move away from the (dark) text */
  --hf:#C9A6F0; --on-hf:#1A0F24;
}
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"]{
    --bg:#0E1812; --paper:#15231A; --ink:#E4ECE5; --muted:#98AB9D; --line:#294033;
    --fairway:#2F7D55; --c-driver:#6CC495; --on-driver:#0E1812;
    --c-medium:#4D8FD6; --c-heavy:#E0544A;
    --danger:#F0776C; --warn:#E8B339;
    --heat:#B8771E; --heat-good:#2F7D55; --mat:#1B3A2A;
    --c-near:#5AA9E6; --c-mid:#E8B339; --c-far:#D96AA7;
    --cat-6:#3FBDB8; --cat-7:#A58BEA;
    --badge-aim-bg:#A9D1F5; --badge-aim-ink:#0E1812; --badge-dist-bg:#E8B339; --badge-dist-ink:#0E1812; --badge-bonus-bg:#F2A7DD; --badge-bonus-ink:#0E1812;
    --on-medium:#0E1812; --on-heavy:#0E1812;
    --nds-M:rgba(255,255,255,.35); --nds-H:rgba(255,255,255,.35); --nds-D:rgba(255,255,255,.35);
    --hf:#C9A6F0; --on-hf:#1A0F24;
  }
}
/* Hands-free theme (round 27): while a drill is listening hands-free (its banner is on the page),
   the whole app switches to its own deep-violet color scheme, over light, dark or auto alike, so
   hands-free is recognizable from across the range. It is the dark theme's values (built for dark
   surfaces: every text, link and band color already checked there) on violet surfaces. Weight,
   putt-type and band colors are the dark theme's, never altered for hands-free. Last in the file so
   it wins over the [data-theme] rules of equal weight. Ink on paper 14.6:1, muted on paper 7.6:1. */
:root:has(.hf-banner){
  color-scheme:dark;
  --bg:#1A0F2C; --paper:#26183F; --ink:#F3EDFB; --muted:#C2B2DA; --line:#46325F;
  --fairway:#2F7D55; --fairway-ink:#FFFFFF; --c-driver:#6CC495; --on-driver:#0E1812;
  --c-light:#C99A0E; --c-medium:#4D8FD6; --c-heavy:#E0544A;
  --on-light:#13261B; --on-medium:#0E1812; --on-heavy:#0E1812;
  --danger:#F0776C; --warn:#E8B339;
  --heat:#B8771E; --heat-good:#2F7D55; --mat:#2E2148;
  --c-near:#5AA9E6; --c-mid:#E8B339; --c-far:#D96AA7;
  --cat-6:#3FBDB8; --cat-7:#A58BEA;
  --badge-aim-bg:#A9D1F5; --badge-aim-ink:#0E1812; --badge-dist-bg:#E8B339; --badge-dist-ink:#0E1812; --badge-bonus-bg:#F2A7DD; --badge-bonus-ink:#0E1812;
  --nds-L:rgba(255,255,255,.35); --nds-M:rgba(255,255,255,.35); --nds-H:rgba(255,255,255,.35); --nds-D:rgba(255,255,255,.35);
  --hf:#D9C2F7; --on-hf:#1A0F2C;
}