/* ============================================================ WC26 Visualizer DS — single override entry point. Link this ONE file from public/wc26.html (right after ): The wc26.html SPA can be regenerated by other tooling without touching this file. As long as the single link tag above survives in the head, the DS layer comes back automatically. This file: 1. Pulls in the four token files from /wc26-ds/tokens/. 2. Aliases the SPA's historical CSS variables (--bg, --acc, --gold, --warn, …) onto the formal DS tokens so the inline selectors keep working without a sweep. 3. Adds the .tabular helper. 4. Reskins body + numeric selectors + team-name selectors with the three DS voices: Inter (UI), Archivo (display), JetBrains Mono (data). ============================================================ */ @import url("./tokens/fonts.css"); @import url("./tokens/colors.css"); @import url("./tokens/typography.css"); @import url("./tokens/spacing.css"); /* ---- Backward-compat alias map: the SPA uses --bg / --acc / --gold / --warn / --chipq / --chipe / --shadow throughout its ~1,000 lines of inline CSS. Map them onto the formal tokens. ---- */ :root { --bg: var(--bg-app); --bg2: var(--bg-sunken); --panel: var(--surface-panel); --panel2: var(--surface-raised); --line: var(--border); --txt: var(--text-primary); --mut: var(--text-muted); --mut2: var(--text-faint); --acc: var(--pitch-500); --acc2: var(--sky-500); --gold: var(--gold-500); --red: var(--red-500); --warn: var(--amber-500); --chipq: var(--pitch-tint); --chipe: var(--red-tint); --shadow: var(--shadow-card); } /* ---- Tabular-numeric utility ---- */ .tabular, [data-tabular] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ---- Body: UI font + DS background + DS base size ---- These selectors are intentionally specific enough to win over the SPA's inline rules at the same specificity, since they load later in the cascade via this stylesheet. ---- */ html body { font-family: var(--font-ui), "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--grad-app); color: var(--text-primary); font-size: var(--fs-body); line-height: var(--lh-base); } /* ---- Display font on team names + product wordmark ---- */ .brand h1, .hero h2, .mp-side .nm, .champ .nm { font-family: var(--font-display); } .hero h2 { font-size: var(--fs-hero); letter-spacing: var(--tracking-tight); } /* ---- Mono font + tabular-nums on every figure ---- */ table.stand td, .stat .v, .mrow .mscore, .rscore b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .stat .v { font-size: var(--fs-stat); } /* Team-name column in the standings stays on the UI font, not mono. */ table.stand td.tm { font-family: var(--font-ui); }