/* ============================================================
   Flapp design tokens — the single source.

   Served at /tokens.css and linked by every surface that renders Flapp:
   the SPA (static/index.html), the landing page (static/landing.html) and
   the server-rendered Academy (services/academy/renderer.py).

   Direction A · "Instrument" (design handoff, 13 Sep 2026). One accent,
   hairline structure, mono numerals, status always paired with a word.
   The values here are the handoff's token table; the names are the ones
   the stylesheets and the SPA's inline styles have always used, so a
   surface that reads `--c-blue` gets the accent and one that reads
   `--st-bad-text` gets a red that clears AA on its own tint. Old names are
   kept on purpose: renaming them would touch a thousand call sites for no
   change a reader could see.

   Each surface may still declare its OWN tokens after this file — the
   landing page keeps the pre-Instrument palette it was approved with, the
   Academy keeps its own type sizes — and may override a value here when
   it genuinely differs. Anything shared belongs in this file, not in three
   of them.
   ============================================================ */
:root{
  /* ---- surfaces ---- */
  --c-ground:#F6F5F2;                  /* the page behind every card -- warm, not lab-grey */
  --c-bg:#FFFFFF;                      /* surface/card: cards, tables, nav */
  --c-panel:#EFEDE8;                   /* surface/sunken: folds, coverage strip, re-test bar */
  --c-panel-blue:#EDF2FD;              /* panel/accent: the one-change paragraph, upsell, active row */
  --c-panel-quiet:#ECE9E1;             /* panel/quiet: trust strip, caveats, "nothing to fix" */
  --c-line:#DEDBD4;                    /* line/hairline, warm */
  --c-line-strong:#B9B5AC;             /* line/strong: inputs, dropzone, whiskers */
  --c-blue-soft:#B9B5AC;               /* legacy name: the dashed drop-zone border */
  --c-media-bg:#0E1116;                /* dark ground behind every video/keyframe */

  /* ---- ink ---- */
  --c-ink:#14181F;                     /* ink/1: headings, values */
  --c-navy:#14181F;                    /* legacy name for ink/1 — the app's "navy" is ink now */
  --c-ink-soft:#3C424C;                /* ink/2: body */
  --c-ink-faint:#5B6470;               /* ink/3: labels and units, 7.0:1 on white */
  --c-ink-disabled:#8A929E;            /* ink/4: disabled only (3.1:1) — never for content */

  /* ---- brand navy: the band across the top of the app, and the fill of a
     chosen value (Run / Bike, a segment, a filter) so a selection reads as
     part of the same blue rather than as a black block. ---- */
  --c-brand-navy:#14294B; --c-brand-mid:#1D3E77;

  /* ---- accent: the only one ---- */
  --c-blue:#2457C5; --c-blue-dk:#1C46A3; --c-blue-active:#163A87;
  --c-blue-ink:#FFFFFF;                /* label on the filled primary (5.4:1) */

  /* ---- brand ---- */
  --c-coral:#F1553F;                   /* the wordmark dot, and the accent word in the band */
  /* Coral is the colour of ACTION: the one filled button a screen has
     (Analyze, Unlock, Choose a plan) wears it, and nothing else does. The
     button tier is the AA-safe step of the brand coral (4.6:1 with white);
     -dk is its hover. Blue stays with navigation, data and links. */
  --c-coral-btn:#CE3F2B; --c-coral-dk:#B8341F;
  --c-action:var(--c-coral-btn); --c-action-dk:var(--c-coral-dk); --c-action-ink:#FFFFFF;

  /* Sport colours are retired: an icon takes the colour of its row. */
  --c-swim:#5B6470; --c-bike:#5B6470; --c-run:#5B6470;
  --c-warn:#B7791F;                    /* status/warn/line */
  --c-warn-text:#6B4E06;               /* status/warn/text — 7.4:1 on its tint */
  --c-orange:#B7791F;                  /* grade D — the same warn line */

  /* ---- status scale — fixed semantics, every pair AA on its own tint ----
     -text/-bg/-fill map to the handoff's text/tint/line. Status is never
     colour alone: every instance carries a glyph (● △ ✕) or a word. */
  --st-good:#14532A; --st-good-fill:#2E7D3A; --st-good-bg:#D5EBD9;
  --st-warn:#6B4E06; --st-warn-fill:#B7791F; --st-warn-bg:#F7EAC8;
  --st-bad:#7E1611;  --st-bad-fill:#C5221F;  --st-bad-bg:#F6D9D6;
  --st-bad-text:#7E1611;

  /* ---- "good", said out loud: the landing's green for the moments that are
     positive -- in range, improving, high confidence, nothing to fix. The
     status scale keeps its AA-on-tint text for tables; these are the chips. */
  --c-live-good:#1F7A45; --c-live-good-fill:#2E9E5B; --c-live-good-bg:#E6F4EC; --c-live-good-line:#BCE3CC;
  --c-live-bad:#B8371F; --c-live-bad-bg:#FDECE8; --c-live-bad-line:#F3C2B8;

  /* ---- over footage only ---- */
  --ov-halo:rgba(14,17,22,.55);        /* under every skeleton line; width = stroke + 4 */
  --shadow-footage:0 2px 6px rgba(20,24,31,.28);

  /* ---- type ---- */
  --f-brand:'Archivo','Arial Black',sans-serif;          /* the wordmark, nothing else */
  --f-display:'IBM Plex Sans','Segoe UI',sans-serif;
  --f-body:'IBM Plex Sans','Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;

  /* ---- radii: a 4 px corner on cards and buttons -- the hairline structure
     stays, the severity goes; inputs and bars r/2, dots full ---- */
  --radius-xs:2px; --radius-btn:4px; --radius:4px; --radius-lg:6px; --skew:0deg;

  /* ---- elevation: two, plus the one over footage. Nothing lifts on hover. ---- */
  --shadow:0 2px 6px rgba(20,24,31,.10);                  /* shadow/pop: menus, toast */
  --shadow-lg:0 12px 32px rgba(20,24,31,.18);             /* shadow/modal */
  --ring:0 0 0 2px var(--c-bg),0 0 0 4px var(--c-blue);   /* focus */
  --sidebar-w:216px;                   /* the shared app/Academy shell */
}

/* The dark set, corrected on the one screen that was drawn in it. Opt-in by
   attribute, never by media query: the handoff is explicit that shipping dark
   means auditing every screen, not flipping a variable. */
:root[data-theme="dark"]{
  --c-brand-navy:#5B8DF0; --c-brand-mid:#3A5FB0;
  --c-ground:#0E1116; --c-bg:#161A21; --c-panel:#1F242C; --c-panel-blue:#12203C;
  --c-panel-quiet:#1F242C;             /* panel/quiet is dropped on dark: sunken + a top hairline */
  --c-line:#272D36; --c-line-strong:#3A424E; --c-blue-soft:#3A424E;
  --c-ink:#F2F4F7; --c-navy:#F2F4F7; --c-ink-soft:#C6CCD6; --c-ink-faint:#98A2B3; --c-ink-disabled:#7C8698;
  --c-blue:#5B8DF0; --c-blue-dk:#7BA3F5; --c-blue-active:#A7C2F9;
  --c-blue-ink:#0E1116;                /* the filled primary never takes a white label on dark (2.6:1) */
  --st-good:#7EE0A0; --st-good-fill:#3FA05C; --st-good-bg:#12301D; --st-good-band:#1B4A2C;
  --st-warn:#F3C969; --st-warn-fill:#C9911F; --st-warn-bg:#35290A;
  --st-bad:#F79189;  --st-bad-fill:#E0524C;  --st-bad-bg:#3A1512; --st-bad-text:#F79189;
  --c-warn:#C9911F; --c-warn-text:#F3C969; --c-orange:#C9911F;
  --c-coral-btn:#F1553F; --c-coral-dk:#F79189; --c-action-ink:#0E1116;
  --shadow:0 2px 6px rgba(0,0,0,.40); --shadow-lg:0 12px 32px rgba(0,0,0,.40);
}
:root{--st-good-band:var(--st-good-bg)}   /* range bands: the pill tint on light, its own step on dark */