/* ========================================================= THE ROUND ROBIN — Design Tokens The single :root for the whole product. Every other stylesheet ADDS to this one; none of them redefine a token. LOAD ORDER IS LOAD-BEARING. This file must be linked BEFORE main.css / studio-theme.css / chart-tokens.css in every . A page that loads one of those without this one renders with every token unset. Seven heads link it: _layouts/default.html, the three studio index.html files, admin, paymon, preview. (Never write a glob with a star-slash in a CSS comment: it closes the comment. That exact typo hid this whole block on 2026-09-09.) It is also listed FIRST in fingerprint-assets.js GLOBAL_ASSETS. That script throws on a file that is listed but missing; it does NOT notice a file you forgot to list, and an unlisted stylesheet ships unhashed under a one-year immutable cache header. ========================================================= */ :root { --orange: #FF7704; /* accent text, nav-active, arrow CTAs, featured stripe */ --amber: #E8872B; /* primary button fill, badge tint, amber tick */ --hover-lift: brightness(1.08); /* warm hover gesture for both orange and amber tones */ --navy: #003368; /* Hub-card category colors — set --c/--c-dim/--c-border inline per card */ --studio: #FF7704; --studio-dim: rgba(255,119,4,0.13); --studio-border: rgba(255,119,4,0.32); --projection: #60A5FA; --projection-dim: rgba(96,165,250,0.13); --projection-border: rgba(96,165,250,0.32); --guide: #4ADE80; --guide-dim: rgba(74,222,128,0.13); --guide-border: rgba(74,222,128,0.32); --bg: #01172B; --surface: #061E3A; --card: #0A2444; --border: #0F2E55; --text: #F0F4F8; --muted: #7C99B7; /* Paper: the print-inspired light moments DESIGN_DIRECTION.md §12 allows inside the dark page (first use: the homepage record sheet, 2026-09-24). Cool rather than cream, so it reads as a report entering the room, not a parchment effect. */ --paper: #EEF2F6; --paper-rule: #C8D2DD; --paper-sub: #4A6280; --ink: #01172B; --sub: #A9BED4; --fe: 'Newsreader', Georgia, 'Times New Roman', serif; /* editorial: hero, page h1, findings */ --fd: 'Antonio', 'Arial Narrow', Arial, sans-serif; --fb: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fm: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fc: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --pad: 36px; --max: 1180px; /* ── SPACE, RADIUS, SHADOW, DEPTH ───────────────────────────────────────── None of these existed before 2026-09-09. Their absence is why the site accreted 24 distinct border-radius values (every integer 1-10, plus 12, 14, 16, 18, 20), 17 box-shadows (several within 2px of each other), and 57 distinct padding shorthands — each one plausible on its own, none of them agreeing with the others. These are ADDITIVE. Nothing was remapped onto them at the time they were introduced, so this file's arrival changed no rendered pixel. Migrating the ~250 existing literals happens later, deliberately, one file at a time, with scripts/css_snapshot.js proving each step. The radius steps are chosen to absorb the real clusters, not invented: 1-5px (90 uses, mostly 3 and 4) -> --r-sm 6-9px (85 uses, mostly 6 and 8) -> --r-md 10-14px (30 uses, mostly 10) -> --r-lg 16-18px panels -> --r-xl 20px (badges only) -> --r-pill 999px / 50% -> --r-pill / --r-circle 999px and 50% are NOT interchangeable: on a non-square element 50% makes an ellipse and 999px makes a stadium. Use --r-circle only on squares. */ --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 16px; --r-pill: 999px; --r-circle: 50%; /* A 4px base step. --s-6 is the section rhythm, --s-7 the page gutter's desktop value; keep --pad in sync with --s-7 when either moves. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 36px; --s-7: 56px; /* Three roles, not seventeen: at rest, lifted, and focused. The amber glow shadows in studio-theme.css are deliberately absent — they are removed rather than tokenised (CHART_STYLE.md §9 sanctions exactly one gradient in core UI, and a colored glow under a gradient button is not it). */ --shadow-1: 0 2px 10px rgba(0, 0, 0, 0.35); --shadow-2: 0 10px 24px -12px rgba(0, 0, 0, 0.7); --ring: 0 0 0 1px var(--orange); /* Semantic colour. Green and red were each being re-picked per page: four near-identical greens for "good" and five reds for "bad", so the same idea rendered a slightly different colour depending which page you were on. --ok is the same hex as --guide today. They are kept separate because they are different ideas -- one is the guides pillar, one is "this went well" -- and folding them together would mean a future pillar recolour silently restyled every positive diff on the site. --live is deliberately NOT --ok: it sits as a 6px dot on a tinted badge and needs the deeper green to hold contrast at that size. */ --ok: #4ADE80; --live: #22C55E; --danger: #F87171; --warn: var(--amber); /* Raw values of 20 / 200 / 400 / 1000 are in use with no relationship to each other. These are the intended ladder. */ --z-nav: 100; --z-dropdown: 200; --z-modal: 900; --z-toast: 1000; /* TYPE SCALE This file used to carry 27 distinct font sizes, seven of them half-pixel (8.5, 9.5, 10.5, 11.5, 12.5, 13.5, 14.5), with almost every body-copy selector sitting between 10 and 15px. The effect was that everything read as UI chrome and nothing read as writing. The steps below are the only sizes this stylesheet uses. The first six are chrome (labels, badges, table cells, buttons) and are deliberately small. --t-read and up is text meant to be read at length, and prose selectors must use those rather than borrowing a chrome step. Retuned 2026-09-09, tighter and more editorial: --t-display 48 -> 34, --t-h2 26 -> 22, --t-h3 20 -> 18, --pad 56 -> 36 and --max 1400 -> 1180. The site's payload is numbers -- tables, seed lines, probabilities -- and the old scale spent a lot of a screen on headings before any of it appeared. The whole ladder moved together, in one commit, so the change is legible as one decision rather than a drift. The 80px .hero h1 that used to be the largest type here is gone: that whole .hero component was dead CSS, superseded by .home-hero in home.css, and took four of the file's ten clamp() formulas with it. Two things are deliberately NOT on this scale: 1. Chart type. CHART_STYLE.md §1 fixes its own sizes (9px ticks, 10.5px data, IBM Plex Sans row labels) and chart-tokens.css owns them. Do not reconcile the two. 2. Display numerals and the hero. The big sizes left as literals below (.score-num 52/44, .home-stat-val 26, .ss-num 28, .guide-stat-val 30, .hero h1 80) are per-component roles, and two of them are responsive pairs. They are not sprawl and folding them into three tokens would be churn for its own sake. */ --t-micro: 9px; /* superscript units, densest labels */ --t-mini: 10px; /* legal, footnotes, micro labels */ --t-label: 11px; /* eyebrows, badges, section labels */ --t-meta: 12px; /* dense UI, table cells */ --t-ui: 13px; /* buttons, secondary UI text */ --t-body: 14px; /* default UI body */ --t-strong: 15px; /* nav, emphasised UI body */ --t-read: 16px; /* prose */ --t-lede: 18px; /* ledes and intros */ --t-h3: 18px; --t-h2: 22px; --t-display: 34px; /* page h1 */ } /* Seed-chip fill colors for the homepage hero bracket art -- orange (1-seed) fading through blue into gray/near-black (16-seed) so the chips read as a strength gradient, not sixteen identical boxes. These lived in home.css until 2026-09-09, which meant every `fill="var(--seed-N)"` rendered BLACK on any page that didn't load home.css -- and home.css is linked by exactly one file, index.html. That misfired once for real (2026-08-27, a fingerprint/deploy race). CHART_STYLE.md §3 tells every future chart author to reach for this ramp, so it belongs in the file they will already have loaded. */ :root{ --seed-1:#E8872B; --seed-2:#D07828; --seed-3:#4A6FA5; --seed-4:#3D5E8C; --seed-5:#3D5E8C; --seed-6:#304D73; --seed-7:#304D73; --seed-8:#2A4060; --seed-9:#2A4060; --seed-10:#254060; --seed-11:#6B4A2A; --seed-12:#6B4A2A; --seed-13:#555; --seed-14:#555; --seed-15:#484848; --seed-16:#3A3A3A; } /* The page gutter's responsive ladder. It lives here rather than in main.css's breakpoint section because it is a token definition, and because that keeps the whole gutter scale in one place to change. The rungs are main.css's documented house ladder (1200 / 900 / 700 / 480). */ @media (max-width: 1200px) { :root { --pad: 32px; } } @media (max-width: 900px) { :root { --pad: 24px; } } @media (max-width: 700px) { :root { --pad: 18px; } } @media (max-width: 480px) { :root { --pad: 14px; } } /* The ladder only ever stepped DOWN. Above 1252px -- --max 1180 plus its two 36px gutters -- the layout stopped growing and just accumulated empty gutter, while nav, footer and the ad slot kept running edge to edge. At a 16" viewport (1728px) that put the content column 274px inside a nav logo still sitting at 36px: three different left edges on one page, and the wider the display the worse it read. Two upward rungs, taken from the display widths that actually exist rather than round numbers: 1500 the 16" MacBook Pro at its roomier scalings, and most 1600px external displays 1800 1920px desktop monitors --max is the only thing that grows. --pad deliberately does not: above 1252px the gutter is no longer what holds content off the viewport edge, the centering margin is, and a bigger --pad there would eat the width these rungs just bought. Prose is unaffected either way -- every reading measure on the site is capped by its own selector (540px ledes, 640px proof lede, 82ch on /about/), so the extra width lands on tables, hub grids and charts, which is where it was missing. */ @media (min-width: 1500px) { :root { --max: 1280px; } } @media (min-width: 1800px) { :root { --max: 1360px; } } /* The inline padding a FULL-BLEED bar needs for its contents to land on the same left and right edge as a centered `max-width: var(--max)` container -- for the bars whose background must keep running to the viewport edge while their contents do not: nav, footer, the ad slot. Below --max it collapses to --pad, which is what those bars already used, so nothing moves at or under 1252px. Above it, it absorbs the centering margin the content container is getting. It aligns to the container's OUTER edge, not to the text inside it. That is the relationship the site already had at every width where the two agreed, and preserving it is the point -- this token stops a drift, it does not re-align the nav. `100%` stays unresolved until the token is used, so it measures the bar's own containing block. var(--pad) and var(--max) resolve here on :root, which is why the two rungs above re-derive it for free. */ :root { --bleed-pad: max(var(--pad), calc((100% - var(--max)) / 2)); }