/* ============================================================
   SOURCE ELEMENTS — DESIGN TOKENS
   The definition site. Link this BEFORE styles.css — styles.css
   consumes these and the order is load-bearing.
   Reference: se-design-system/references/tokens.md
   ============================================================ */

/* ── TYPOGRAPHY VOICE — RATIONING RULES (Ross, pinned 2026-07-14 / re-ratified 2026-07-16) ──
   --font-mono is for NUMBER DATA ONLY: measured figures, counts, timecodes, deltas,
   revisions, ordinal counters. NOT for labels, eyebrows, chip text, buttons, headers,
   identifiers, or body copy — those flatten into one technical register and hierarchy dies.
   SOLE EXCEPTION: depicted software. Hand-built fake-UI (.panel, .tc-panel) and screenshot
   callouts (.ui-shot__chip) may speak mono, because they portray an application's own
   chrome rather than this site's marketing voice.
   Labels demote to --font-secondary (Roboto). Body/prose is --font-primary (Open Sans). */

/* ── OPEN SANS FALLBACK, SIZE-MATCHED (2026-10-06) ──
   Open Sans arrives from Google Fonts with display=swap, so first paint sets
   in whatever the stack falls back to. Unmatched, the homepage H1 set 4 lines
   in the fallback and 5 in Open Sans (3 -> 4 on a phone) and the hero stage
   jumped 21px when the font landed (CLS .021 desktop / .043 phone). These
   faces make a local system font occupy Open Sans's space instead. The fonts
   that load and the design are unchanged: these families only ever paint
   before Open Sans arrives, or if it never does.

   Every value is computed from font files, not tuned by eye:
   - Open Sans: Version 3.000, the variable font Google Fonts serves
     (OpenSans-VariableFont_wdth,wght.ttf), instanced at wdth 100 and each
     weight below. unitsPerEm 2048; hhea = OS/2 typo: ascender 2189,
     descender -600, lineGap 0 (USE_TYPO_METRICS set).
   - Tahoma 5.01 and Arial 5.01 (macOS Supplemental, the same files Windows
     ships). Neither has a semibold or extrabold, so 600-800 use their Bold.
   size-adjust = sum of Open Sans advance widths / sum of the local font's,
   over the text the homepage hero sets in that weight: 800 the H1, 400 the
   lede and note, 700 the two buttons (600 sets nothing there, so all the
   site's src/pages copy). ascent/descent/line-gap = Open Sans's metric /
   unitsPerEm / size-adjust, because size-adjust scales those too.
   Tahoma first: of the system fonts measured, its word widths track Open
   Sans's most closely (per-word ratio spread 3.1% at 800, Arial 4.4%), and
   it is the one that reproduces the H1's line breaks at every width checked
   (360-1920). Arial (or its metric twin Liberation Sans) covers iOS and
   Linux, which have no Tahoma. With neither (Android), local() fails and the
   stack falls through as it did before. */
@font-face{font-family:'Open Sans Fallback';font-style:normal;font-weight:400;src:local('Tahoma');
  size-adjust:104.71%;ascent-override:102.08%;descent-override:27.98%;line-gap-override:0%}
@font-face{font-family:'Open Sans Fallback';font-style:normal;font-weight:600;src:local('Tahoma Bold'),local('Tahoma-Bold');
  size-adjust:95.34%;ascent-override:112.11%;descent-override:30.73%;line-gap-override:0%}
@font-face{font-family:'Open Sans Fallback';font-style:normal;font-weight:700;src:local('Tahoma Bold'),local('Tahoma-Bold');
  size-adjust:99.37%;ascent-override:107.57%;descent-override:29.48%;line-gap-override:0%}
@font-face{font-family:'Open Sans Fallback';font-style:normal;font-weight:800;src:local('Tahoma Bold'),local('Tahoma-Bold');
  size-adjust:103.39%;ascent-override:103.38%;descent-override:28.34%;line-gap-override:0%}
@font-face{font-family:'Open Sans Fallback Arial';font-style:normal;font-weight:400;src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans');
  size-adjust:105.27%;ascent-override:101.54%;descent-override:27.83%;line-gap-override:0%}
@font-face{font-family:'Open Sans Fallback Arial';font-style:normal;font-weight:600;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold');
  size-adjust:100.54%;ascent-override:106.31%;descent-override:29.14%;line-gap-override:0%}
@font-face{font-family:'Open Sans Fallback Arial';font-style:normal;font-weight:700;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold');
  size-adjust:106.11%;ascent-override:100.73%;descent-override:27.61%;line-gap-override:0%}
@font-face{font-family:'Open Sans Fallback Arial';font-style:normal;font-weight:800;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold');
  size-adjust:109.97%;ascent-override:97.19%;descent-override:26.64%;line-gap-override:0%}

/* The same treatment for Roboto (--font-secondary, labels and eyebrows),
   whose swap was the rest of the phone shift: the hero eyebrow set 2 lines
   in the old fallback and 1 in Roboto, moving everything under it 21px.
   Roboto: Version 3.015 (@fontsource/roboto 5.2.10, built from the Google
   Fonts source), unitsPerEm 2048, hhea ascender 1900, descender -500,
   lineGap 0 (USE_TYPO_METRICS not set, so hhea is what renders). Google
   loads 500 and 600 only. Arial for 500, Arial Bold for 600; size-adjust
   over the text the hero sets in each (600 the eyebrow, uppercased as it
   renders; 500 the trust row, which asks for 400 and is given 500). */
@font-face{font-family:'Roboto Fallback';font-style:normal;font-weight:500;src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans');
  size-adjust:93.52%;ascent-override:99.20%;descent-override:26.11%;line-gap-override:0%}
@font-face{font-family:'Roboto Fallback';font-style:normal;font-weight:600;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold');
  size-adjust:91.41%;ascent-override:101.49%;descent-override:26.71%;line-gap-override:0%}
:root{
  /* Tier 1/2 — SE tokens */
  --se-bg:#262C31;
  --se-inner:#2E343A;
  --se-frame:#31373E;
  --se-frame-hover:#39424C;
  --se-canvas:#0A0A0A;
  --se-deep:#1A1E22;
  --se-primary:#C5E86C;
  --se-primary-hover:#E3FF9C;
  --se-selected:#A7E163;
  --se-nexus:#3DA5D9;
  --se-live:#F7B226;
  --se-focus:#00BDFC;
  --se-border-teal:#7EA4B0;
  --se-text:#F9F9F9;
  --se-text-white:#FFFFFF;
  --se-text-secondary:rgba(255,255,255,.75); /* 8.62:1 on --se-bg — AA */
  --se-text-dim:rgba(255,255,255,.6);        /* 6.10:1 on --se-bg — AA */
  /* 4.72:1 on --se-bg — passes AA (4.5:1) but MARGINALLY. Do not lower this alpha.
     Caveat: on the lighter surfaces it drops BELOW AA for normal text —
     4.42:1 on --se-inner, 4.31:1 on --se-frame. Measured 2026-07-17 (WCAG 2.x). */
  --se-text-caption:rgba(255,255,255,.5);
  /* --se-text-muted (rgba(255,255,255,.4)) was DELETED in Phase 2: 0 uses, and 3.57:1 on
     --se-bg FAILS AA 4.5:1 for normal text. An unused AA-failing token is an attractive
     nuisance. For small label text use --se-a11y-muted. */
  --se-a11y-muted:var(--se-text-dim); /* AA-passing small label text — aliased, not duplicated */
  --se-meter-L:#E0FE27;
  --se-meter-R:#F9C234;
  /* ── CHANNEL TOKENS ──────────────────────────────────────────────
     Bare "R,G,B" triples so rgba() can set an arbitrary alpha off a token
     instead of re-typing the channel triple — the reason raw rgba() literals
     accumulated before Phase 2. Consume as: rgba(var(--se-primary-rgb),.5).
     Each MUST stay in lockstep with its hex token above.
     For anything that should follow the PAGE ACCENT, use --accent-rgb instead. */
  --se-primary-rgb:197,232,108;     /* --se-primary     #C5E86C */
  --se-bg-rgb:38,44,49;             /* --se-bg          #262C31 */
  --se-border-teal-rgb:126,164,176; /* --se-border-teal #7EA4B0 */
  --se-live-rgb:247,178,38;         /* --se-live        #F7B226 */
  /* Radii — marketing scale */
  /* The sticky header's height. Anything that sticks BELOW it has to start
     here, and hard-coding the number is how they drift apart: the news index
     stuck its filter bar at 80px against a 66px header and left a 13px slot
     for the cards to scroll through. */
  --hdr-h:66px;
  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:12px; --r-2xl:16px; --r-pill:50px;
  /* Motion */
  --ease-settle:cubic-bezier(.16,1,.3,1);
  --dur-fast:150ms; --dur-slow:400ms;
  /* Type — see the RATIONING RULES above before reaching for --font-mono */
  --font-primary:'Open Sans','Open Sans Fallback','Open Sans Fallback Arial',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-secondary:'Roboto','Roboto Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','Fira Code',monospace;
  /* Page accent (default: brand lime) */
  --accent:var(--se-primary);
  --accent-hover:var(--se-primary-hover);
  --accent-rgb:197,232,108;
  --accent-ink:#1A1E22;
}
/* Route accents. Same specificity as :root (0,1,0) — these must stay AFTER it to win. */
[data-accent="nexus"]{--accent:var(--se-nexus);--accent-hover:#6FC4EA;--accent-rgb:61,165,217;--accent-ink:#0d1b22;}
[data-accent="live"]{--accent:var(--se-live);--accent-hover:#FBCB66;--accent-rgb:247,178,38;--accent-ink:#221805;}