/* sprk-type.css — the site-wide typography RULES. Loaded by every page that
 * requests webfonts, immediately after the Google Fonts <link>.
 *
 * The face is ARCHIVO (Omnibus-Type, SIL OFL 1.1) — a late-19th-century
 * American grotesque with a real WIDTH axis. That axis is the point: the rail
 * runs condensed to buy label space, marketing headlines run expanded, and both
 * come out of the same file. Hierarchy from width instead of decoration.
 * Loaded as a 2-axis variable font: wdth 62–125, wght 100–900.
 *
 * ── WHAT THIS FILE IS AND IS NOT ─────────────────────────────────────────────
 * It is NOT a single point of control for the typeface. Every component still
 * declares its own complete font stack ("Archivo, -apple-system, …") in its own
 * file — deliberately, so that if THIS stylesheet ever fails to load, each
 * component still has a working system fallback instead of collapsing to the
 * browser default serif. Changing the typeface therefore still means a
 * repo-wide sweep of font-family declarations, exactly as this one was done.
 * What this file owns is the RULES that must hold everywhere: tabular figures,
 * and the width discipline around numeric columns.
 *
 * ── THREE THINGS THAT WILL BITE ANYONE EDITING THIS ──────────────────────────
 *
 * 1. TABULAR FIGURES ARE MANDATORY, NOT COSMETIC. Archivo's default figures are
 *    proportional and at body weight have SEVEN different advance widths
 *    (0.521–0.574em). Measured live in a browser at 40px: "111111" renders
 *    125.1px against "888888" at 137.7px — a 10% gap, so a column of money
 *    visibly fails to line up. With tabular-nums both are exactly 136.4px.
 *    That is what the `html` rule below is for. Never "clean it up".
 *
 * 2. THE FILE'S DEFAULT INSTANCE IS SEMIBOLD (wght 600), not Regular. The
 *    Google Fonts <link> declares the axis ranges for us, so this is only a
 *    trap if someone later self-hosts: a hand-written @font-face that omits
 *    `font-weight: 100 900; font-stretch: 62% 125%;` renders EVERYTHING
 *    semibold. If you move to self-hosting, copy those two lines.
 *
 * 3. NEVER MIX WIDTHS INSIDE ONE NUMERIC COLUMN. The tabular advance tracks
 *    both axes — 0.568em at wght400/wdth100 but 0.526em at wdth90. Digits stay
 *    uniform within a single width, so columns align only while the whole
 *    column shares one wdth. Tables are pinned to 100% below; keep the
 *    condensed treatment (sidebar.js nav rows) for chrome only.
 *
 * Archivo's ITALIC is a SEPARATE ~99 KB file and is deliberately NOT loaded.
 * Adding italic type without adding that request synthesizes a fake oblique.
 */

:root {
  /* Reference tokens. Nothing is forced to consume these — see "WHAT THIS FILE
     IS AND IS NOT" above — but new code should prefer them over retyping the
     stack, and they document the canonical values in one readable place. */
  --sprk-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --sprk-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  --sprk-wdth-rail: 92%;
  --sprk-wdth-base: 100%;
  --sprk-wdth-display: 118%;
}

/* See note 1. Money is the most-read thing on this site, so tabular is the
   document default and running prose is the exception, not the reverse. */
html { font-variant-numeric: tabular-nums; }

/* Running prose doesn't want tabular gaps between digits. Deliberately narrow:
   only true prose containers opt out, because almost everything else on this
   site that holds a digit is a figure that should stay aligned. */
p, li, blockquote { font-variant-numeric: normal; }

/* See note 3 — every cell in a numeric column must share one width. `table`
   does the real work here; .sprk-num / [data-num] are opt-in hooks for numeric
   surfaces that are not tables (stat tiles, pills) and are not yet applied
   anywhere — they exist so such a surface has a correct hook to reach for. */
table, .sprk-num, [data-num] { font-stretch: 100%; font-variant-numeric: tabular-nums; }

/* 4. THE MONO BINDING. Roughly 130 places across BOTH rails mark a spark code,
 *    an advertiser id or a campaign id with Tailwind's `.font-mono` utility.
 *    That utility resolves to `ui-monospace, SFMono-Regular, …` — the OS mono —
 *    so every code on the site rendered in the system face while the JetBrains
 *    Mono webfont we already download on every page was used only by the rails
 *    and the footer chips. Two different monos, one product.
 *
 *    The `html` qualifier is load-bearing: the Tailwind CDN injects its
 *    stylesheet at RUNTIME, i.e. after this file, so a bare `.font-mono` here
 *    would tie on specificity and lose on order. `html .font-mono` is (0,1,1)
 *    against Tailwind's (0,1,0) and wins regardless of order.
 *
 *    This lives HERE, in the sheet both rails load, and not in admin.css — the
 *    whole point is that a code reads the same in Admin as on the affiliate
 *    dashboard. Anything that must stay on the OS mono should say so inline.
 *    (.a-mono is the non-Tailwind alias, for markup that isn't using utilities.) */
html .font-mono, html .a-mono { font-family: var(--sprk-mono); }