/* BALLKNOWME design system — TOKEN ALIAS LAYER ============================================================================ Will's ruling, 2026-08-30: TOKENS ARE AN ALIAS, NOT A REPAINT. BKM-DESIGN-SYSTEM-SPEC.md §2 publishes a new token vocabulary AND a new hex block (#0b0d10 / #e7eaf0 / #f5a623). The names are adopted here. The hexes are NOT. Every name below resolves to a value the sport's own stylesheet already defines, so: * no colour visibly changes anywhere, * ~1,800 lines of existing per-sport CSS keep resolving untouched, * the step is reversible by deleting one file. A genuine palette shift, if it is ever wanted, is its own later step with its own before/after. It is not this file's job. THERE ARE NO HEX LITERALS IN THIS FILE OR IN bkm-components.css, BY DESIGN. verify_bkm_ui.py fails the build if one appears. That check IS the ruling. Load order: after the sport stylesheet. (var() resolves lazily so the order does not actually matter, but explicit beats clever.) ========================================================================== */ :root { /* ── surfaces ──────────────────────────────────────────────────────── spec --bg -> the sport's --bg (already the same name, untouched) spec --line -> the sport's --line (already the same name, untouched) */ --card: var(--panel); --card2: var(--panel2); /* --line2 is the spec's BRIGHTER hairline (#2e3440 vs #252a33). No brighter hairline exists in the NFL palette — it has --line and the DIMMER --line-soft, nothing above --line. Introducing #2e3440 would be a new colour, which ruling 1 forbids, so --line2 collapses onto --line. Components must therefore not depend on a two-step hairline hierarchy. When a real palette step happens, this is the one line that changes. */ --line2: var(--line); /* ── text ──────────────────────────────────────────────────────────── */ --dim: var(--text2); --faint: var(--text3); /* ── semantic — colour is data, never decoration ──────────────────── */ /* ★ THE --gold EXCEPTION — Will's ruling 3, 2026-08-30. DO NOT "FIX" THIS. ------------------------------------------------------------------ Spec §2 says gold is brand/active state and NEVER colours data. Spec §4.8 says the best price in the book-prices grid is highlighted in gold. Those two rules collide, and Will ruled that §4.8 WINS: gold may mark THE SINGLE BEST ACTIONABLE PRICE in a price grid. Everywhere else §2 holds — gold is active/brand, and it never colours a probability, a rating, a margin or a result. This is written here, in the token layer, precisely so a later agent reading only §2 does not "correct" the price grid back to neutral and silently delete the one place gold is allowed to carry meaning. */ --gold: var(--acc); --win: var(--pos); --loss: var(--neg); /* Spec --blue (#6b8afd, "informational accent"). No blue exists anywhere in the NFL palette, so under ruling 1 there is nothing to alias it to and nothing may be invented. It collapses onto the secondary ink and NOTHING IN PHASE 2 USES IT. Kept as a named seat so the shape of the spec's palette survives; delete or repoint it when a palette step actually happens. */ --blue: var(--text2); /* ── type scale — spec §2, a CLOSED decision and adopted in full ───── 32/800 hero · 21/800 title · 16/750 lead · 13.5/650 row primary · 12.5/400 row secondary · 11/600 label. The FAMILY is not adopted: Saira stays (ruling 1's second half), so --font keeps whatever the sport stylesheet set. */ /* ── --tscale — THE DESKTOP MULTIPLIER (Will, 2026-09-01) ───────── Will opened the NFL landing page at 1512px: "the landing page is so small i can barely figure out what im looking at." The scale above is a PHONE scale (spec §2, and the non-negotiable at the top of the spec is phone-screen economics). It was then served unchanged to a 1512px desktop, where 11px labels and 12.5px secondary rows are the same physical size on a screen sitting three feet away instead of fourteen inches. Spec §5 desktop says "same components in a wider grid" — it does not say the same TYPE SIZE, and nothing in the spec ever ruled that it should be. The tokens themselves cannot move: verify_bkm_ui.py check 3 pins each one to its literal spec value in EVERY declaration, in every shared stylesheet, and that check is the ruling that the phone scale is closed. So the phone scale stays exactly as published and desktop multiplies it at the point of use. At 1 (the default, and every phone and tablet) the rendered sizes are byte-identical to before. The multiplier is also spent on --h-row, because a row whose type grew 15% inside a 56px cap clips. The phone budget is untouched: the cap only moves where the multiplier does, and it does not move below 1100px. */ --tscale: 1; --t-hero: 32px; --w-hero: 800; --t-title: 21px; --w-title: 800; --t-lead: 16px; --w-lead: 750; --t-row: 13.5px; --w-row: 650; --t-sub: 12.5px; --w-sub: 400; --t-label: 11px; --w-label: 600; /* ── spacing: 4px base grid, card padding 12-14px (spec §2) ────────── */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --pad-card: 13px; /* ── the phone budget, as tokens so the numbers are checkable ──────── 390x844 first-viewport contract (spec §5 / recon "Phase 2 done means"): 52 header + 28 trust + 96 lead + 4x56 rows + 56 tabs = 456 of 844. There is room. Do not spend it. verify_bkm_ui.py re-adds these. */ --h-header: 52px; --h-trust: 28px; --h-lead: 96px; --h-row: 56px; --h-tabs: 56px; } /* ── DESKTOP: the same components, at desktop reading distance ──────────── 1100px is not a new breakpoint — it is the width at which the NFL home page already goes two-column (nfl.css .bkm-... consumers), so the scale changes on the same line the layout does. */ @media (min-width: 1100px) { :root { --tscale: 1.15; } }