/* ══ lowerflower · design tokens ═══════════════════════════════════════
   THE single source of truth for surfaces, text, accent, status, logo and
   type tokens, shared by every page (index.html, gate.html, sports.html).
   Retheme HERE, then bump the ?v= on every <link href="/static/tokens.css">
   — /static/* carries no cache headers, so a same-URL change can serve
   stale from browser cache (same rule as the favicons). */
  :root {
    /* Surfaces are the measured ladder at 0% saturation: the shipped mark is
       variant F (ink/white), which is achromatic, so there is no hue to tint
       with and neutral is the honest result. Lightness values are unchanged
       from the garnet-tinted originals — only the cast is gone. */
    /* Tells the UA which way to paint the bits WE do not draw: scrollbars and
       native form controls. Left unset it computes to `normal` and they render
       in light styling over these dark surfaces — and html sets
       scrollbar-gutter: stable, so a track is always reserved to show it in.
       Follows the data-theme attribute, not the OS, because our toggle does. */
    color-scheme: dark;
    --bg: hsl(0, 0%, 5.10%);
    --bg-elev: hsl(0, 0%, 7.84%);
    --bg-card: hsl(0, 0%, 10.59%);
    /* the masthead wash and the chart tooltip are surfaces too — tokenised so a
       logo-lab retint can carry them along with the rest of the ladder */
    --topbar-bg: color-mix(in srgb, var(--accent) 9%, var(--bg));
    --chart-tip: hsl(0, 0%, 10.59%);
    --text: #F2F0EE; --text-soft: #CFC8C3; --text-dim: #ABA29C; --text-faint: #7E756F;
    --hair: rgba(239, 237, 234, 0.12); --hair-strong: rgba(239, 237, 234, 0.30);
    /* accent follows the mark: F's dark reading is the white plate */
    --accent: #FFFFFF;
    --accent-dim: color-mix(in srgb, var(--accent) 32%, transparent);
    /* text/icons that sit ON an accent fill — ink here, because a white accent
       cannot carry bone text (picked by contrast ratio, see labOnAccent) */
    --on-accent: #1B1618;
    /* status on dark is lifted the same way the chart slots are (see below);
       --warning and --star were already up at OKLCH L .80 and stay put. */
    --good: #41c33c; --critical: #f65f5a; --warning: #fab219;
    /* warn DOTS only — a truer yellow than --warning, which leans orange
       (dark) / brown (light) because it also has to work as small text */
    --warn-dot: #ffd21c;
    --star: #F2B01E;
    /* lockup mark = variant F, flipped for dark: white plate, ink flower.
       The pair is monochrome by design; the garnet accent is unchanged. */
    --logo-tile: #FFFFFF;
    --logo-flower: #1C1210;
    --logo-edge: transparent;   /* hairline for tiles that melt into the bg */
    --logo-solo: #FFFFFF;       /* the un-boxed flower, when that form is used */
    /* request-log token colors = the validated dark chart palette.
       All four sit at OKLCH L .72 — brighter than their light-mode twins by
       .10 (blue, green) and .05 (yellow, purple), and even with each other so
       no series reads as the important one. The previous set ranged .62–.67,
       which put blue and yellow within .04 of the values drawn for a WHITE
       page; on this near-black surface they read muddy.
       .72 is .05 over the dataviz skill's dark band ceiling, taken knowingly:
       that band is calibrated against a #1a1a19 surface and ours is #0D0D0D,
       so the halation the ceiling guards against needs more room here. Every
       other check improves — validate_palette on #0d0d0d reports adjacent CVD
       ΔE 11.2 protan/deutan (was 8.4), normal-vision 19.2, contrast >= 3:1.
       Re-run it before touching these; --c-time was already at .72. */
    --z-ee: #60a7ff; --z-lv: #46bd8d; --z-lt: #da9525; --c-ep: #9f95fa;
    --c-time: #56b6c2;
    --r: 6px;
    /* masthead height. The rail's sticky offset and the full-height logo plate
       both key off this, so the number lives in exactly one place. */
    --topbar-h: 46px;
    /* masthead side gutter — the plate cancels it to sit flush in the corner,
       so it has to track the breakpoint instead of assuming 40px */
    --bar-pad: 40px;
    --sans: 'Onest', -apple-system, "Segoe UI", sans-serif;
    --display: 'Familjen Grotesk', var(--sans);
    --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
    /* label register: lowercase captions, legends and column headers
       (500 10px, tracking 0.02em — see docs/design.md §3; all-caps is
       banned). Split out of --mono so the monospace stays where it is
       FUNCTIONAL — tabular figures, series ids, api keys, hex, code. */
    --label: 'Onest', -apple-system, "Segoe UI", sans-serif;
    /* the type ladder (docs/design.md §3) — no `font:` outside these steps.
       Line-height rides separately (prose states 1.5 where it needs it);
       only the title bakes its 1.05 in. Deliberate voices (stat numbers,
       chips, the gate eyebrow, ?lab internals) are documented exceptions. */
    --f-title: 600 clamp(24px, 3vw, 34px)/1.05 var(--display);
    --f-heading: 600 15px var(--display);
    --f-name: 600 13px var(--display);
    --f-nav: 600 12.5px var(--display);
    --f-body: 400 12.5px var(--sans);
    --f-body-sm: 400 11px var(--sans);
    --f-label: 500 10px var(--label);
    --f-label-lg: 500 11px var(--label);
    --f-data: 400 11px var(--mono);
    --f-data-dense: 400 10px var(--mono);
  }
  [data-theme="light"] {
    color-scheme: light;
    --bg: hsl(0, 0%, 95.10%);
    --bg-elev: hsl(0, 0%, 91.77%);
    --bg-card: hsl(0, 0%, 88.43%);
    --topbar-bg: hsl(0, 0%, 98.63%);
    --chart-tip: hsl(0, 0%, 94.90%);
    --text: #1B1618; --text-soft: #443C3F; --text-dim: #6E6367; --text-faint: #A79DA0;
    --hair: rgba(27, 22, 24, 0.12); --hair-strong: rgba(27, 22, 24, 0.30);
    /* accent follows the mark: F's light reading is the ink plate */
    --accent: #1C1210;
    --accent-dim: color-mix(in srgb, var(--accent) 20%, transparent);
    --on-accent: #F2F0EE;
    --good: #0a7d0a; --critical: #b32e2e; --warning: #8a6100;
    --warn-dot: #e3a600;
    --star: #D9930D;
    /* variant F as authored: ink plate + white flower on light */
    --logo-tile: #1C1210; --logo-flower: #FFFFFF;
    --logo-edge: transparent; --logo-solo: #1C1210;
    --z-ee: #2a78d6; --z-lv: #128a5e; --z-lt: #b57e00; --c-ep: #4a3aa7;
    --c-time: #1d7f8c;
  }