/* ============================================================================ FOOTDICE — Design Tokens (tokens.css) The single source of truth for every visual value. No hardcoded hex, px-shadow, or duration anywhere else in the product (project rule, CLAUDE.md). Source of record: GRIMOIRE/ILLUMINATIONS/Design Tokens.md (White, canonical) + Dark Mode.md ([data-theme="dark"] overrides + WCAG AA rulings). ============================================================================ */ :root { /* --- Semantic colors (WHITE, canonical) ------------------------------- */ --color-bg: #F4F1E8; /* stage background (warm bone) */ --color-ink: #0A0A0A; /* text, borders, default shadows */ --color-fg: var(--color-ink); /* alias — some docs/components say --color-fg */ --ink-fixed: #0A0A0A; /* dark ink that NEVER flips — text on bright constant fills (yellow/green/amber/grey) */ --paper-fixed: #FFFFFF; /* light ink that NEVER flips — text on constant dark fills (e.g. the goal ticker row) */ --color-panel: #FFFFFF; /* card / panel surface */ --color-panel-alt: #E9E5D6; /* inset / disabled surface */ --color-accent-blue: #1D4DFF; /* primary action, current/selected, DEF line */ --color-accent-blue-text: #1438C0; /* blue as small text on bone (AAA 7.9:1) */ --color-accent-yellow: #FFD400; /* choice, highlight, your goals, MID line, draws */ --color-select: #E6B400; /* darker gold for SELECTION highlights + the yellow START button (white-mode legibility) */ --color-accent-red: #FF2D2D; /* danger, losses, opponent goals, ATT line (decorative fills/borders) */ --color-accent-red-text: #D31212; /* red as small text on bone (AA 4.8:1) */ --color-accent-red-surface: #D31212; /* red FILL behind body-size white text — white-on-it 5.9:1 (T18 AA fix) */ --color-success: #00C56A; /* success outcomes (alias of tier-excellent) */ --color-cream: #F1EEE4; /* D100 dial pointer/readout on the dark disc */ /* Team-Tiers bracket accents (Mundial 26). Reference theme-adaptive tokens so they flip in dark mode. */ --color-bracket-underdog: var(--color-macro-mid); /* green — rising outsider */ --color-bracket-regular: var(--color-accent-blue); /* blue — the baseline field */ --color-bracket-contestant: var(--color-accent-yellow);/* gold — the favourites */ /* START board chips (design 2A) — semantic aliases for the renamed brackets. */ --color-bracket-giant: var(--color-accent-blue); /* GIANT (Contestant) */ --on-bracket-giant: var(--color-on-dark); --color-bracket-darkhorse: var(--color-tier-regular); /* DARK HORSE (Regular) */ --on-bracket-darkhorse: var(--ink-fixed); --color-bracket-minnow: var(--color-tier-failure); /* MINNOW (Underdog) */ --on-bracket-minnow: var(--ink-fixed); --color-highlight-soft: #FFF3B8; /* frontier-row wash (INFO campaign table) */ --color-on-ink-accent: var(--color-accent-yellow);/* highlight text on an ink fill (step numerals, chosen campaign) */ --color-on-dark: #FFFFFF; /* text on blue/red/dark fills */ --color-scrim: rgba(10, 10, 10, 0.82); /* full-screen modal scrim */ --color-shadow: var(--color-ink); /* hard-shadow ink (flips to true black in dark) */ /* --- Text tints (FD-005 contrast floor) ------------------------------- Solid colors for de-emphasised TEXT, so contrast no longer depends on the opacity of ink over a variable surface. --text-secondary carries explanatory copy (captions, instructions); it clears WCAG AA (6.2:1 on bone). --text-tertiary is for genuinely incidental chrome only. The opacity-* tokens below remain for non-text dimming (states, fades). */ --text-secondary: #5B594F; --text-tertiary: #807D72; /* --- Fixed-scene colors (design_handoff_final_decisions) -------------- Pinned like --ink-fixed: these paint the three intentionally theme-invariant scenes (match felt, Champion blue, Run Over void) and never flip in dark. --color-highlight-pale is the one exception — it sits on theme-adaptive screens (road ⑂ diamonds) and gets a dark override below. */ --color-felt: #2E4A33; /* match tabletop field */ --color-felt-weave: rgba(0, 0, 0, 0.06);/* diagonal weave stripes on the felt */ --text-on-felt: #B9CBB0; /* muted captions on the felt */ --color-void: #0F0F0F; /* Run Over field (near-black) */ --color-champion-field: #1D4DFF; /* Champion field — the raw blue, never the adaptive accent */ --color-accent-navy: #0A2AA0; /* Champion gold-text hard shadow (FD-018) */ --color-red-deep: #8E1F16; /* Run Over skull plate */ --color-red-void: #4A0E08; /* Run Over shadow + fatal-round chip fill */ --color-green-deep: #123B24; /* dark-idiom win chip fill */ --color-green-mint: #7DE3A5; /* dark-idiom win chip text */ --color-highlight-pale: #FFF7CC; /* pale-yellow family (road path stops) */ --text-secondary-fixed: #5B594F; /* secondary ink on fixed paper (match cards) — never flips */ --shadow-on-scene: 5px 5px 0 0 rgba(0, 0, 0, 0.4); /* soft hard-shadow for paper on the felt/void scenes */ /* --- Tier colors (verdict swatches) ----------------------------------- */ --color-tier-supreme: #6C4BFF; /* natural 1 — rarest best (violet) */ --color-tier-great: #1D4DFF; /* top proportional band (deep blue, was "supreme") */ --color-tier-excellent: #00C56A; --color-tier-nice: #FFD400; --color-tier-regular: #C6CDD6; --color-tier-failure: #FF8A1E; /* doubles as out-of-position amber */ --color-tier-catastrophic: #FF2D2D; --color-tier-disaster: #7A0010; /* natural 100 — rarest worst (deep maroon) */ /* On-colors: tier swatches are bright fills → dark text that never flips (--ink-fixed), per the WCAG AA tables. Supreme (violet) / Great (deep blue) / Disaster (maroon) take white in light; in dark violet/blue lighten so they flip to ink (see below). */ --on-tier-supreme: var(--color-on-dark); --on-tier-great: var(--color-on-dark); --on-tier-excellent: var(--ink-fixed); --on-tier-nice: var(--ink-fixed); --on-tier-regular: var(--ink-fixed); --on-tier-failure: var(--ink-fixed); --on-tier-catastrophic: var(--ink-fixed); --on-tier-disaster: var(--color-on-dark); /* --- Rarity colors (draft bands) -------------------------------------- */ --color-rarity-legendary: #FFD400; --color-rarity-rare: #1D4DFF; --color-rarity-normal: #C6CDD6; /* --- Colour axes (FD-023): a colour means ONE thing per axis ---------- • POSITION → --color-macro-* (GK yellow, DEF blue, MID green, ATT orange). Pitch chips, formation dots, slots, AND the prematch lines bars. • STATUS / OUTCOME → --color-success / --color-accent-red / --color-tier-*. • ACTION → --color-accent-* (blue = primary CTA, yellow = choice/highlight). Don't borrow an ACTION colour to encode POSITION (the old prematch-lines bug) or vice-versa. */ /* --- Macro-position colors -------------------------------------------- */ --color-macro-glk: #FFD400; --color-macro-def: #1D4DFF; --color-macro-mid: #00C56A; --color-macro-ata: #FF8A1E; /* --- Border & radius -------------------------------------------------- */ --border-width: 4px; /* main panels, buttons, dice rims */ --border-width-nested: 3px; /* nested chrome, tier stamps, scrollbar thumb */ --border-width-micro: 2px; /* micro chips, list rules, rarity dots */ --border: var(--border-width) solid var(--color-ink); --radius: 0; /* square corners — never overridden */ /* --- Shadow (hard offset only, zero blur, zero spread) ---------------- */ --shadow-offset: 6px; --shadow-offset-sm: 4px; --shadow-offset-xs: 3px; --shadow-hard: var(--shadow-offset) var(--shadow-offset) 0 0 var(--color-shadow); --shadow-hard-sm: var(--shadow-offset-sm) var(--shadow-offset-sm) 0 0 var(--color-shadow); --shadow-hard-xs: var(--shadow-offset-xs) var(--shadow-offset-xs) 0 0 var(--color-shadow); --shadow-inset-input: inset 4px 4px 0 var(--color-panel-alt); --lift-offset: -3px; /* hover/selected lift distance */ /* --- Spacing ---------------------------------------------------------- */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 48px; /* --- Typography: families --------------------------------------------- */ --font-title: 'Gotfridus', 'Archivo Black', system-ui, sans-serif; /* most-important titles (FOOTDICE, ceremony) */ --font-display: 'Archivo Black', 'Space Grotesk', system-ui, sans-serif; /* mid-important: panel heads, buttons, nation names (FD-001: was CourbeSans, whose capital K rendered as H) */ --font-body: 'JetBrains Mono', ui-monospace, monospace; /* overall body text */ --font-mono: 'JetBrains Mono', 'Space Mono', ui-monospace, monospace; /* --- Typography: fluid scale (clamp) ---------------------------------- */ --fs-display: clamp(2.25rem, 5vw + 1rem, 4.5rem); --fs-h1: clamp(1.5rem, 2.5vw + .75rem, 2.5rem); --fs-h2: clamp(1.125rem, 1.5vw + .6rem, 1.5rem); --fs-body: clamp(.9375rem, .5vw + .8rem, 1.0625rem); --fs-mono: clamp(.8125rem, .4vw + .7rem, .9375rem); /* --- Typography: fixed display sizes (ceremony) ----------------------- */ --text-colossal: 96px; /* RUN OVER / CHAMPIONS */ --text-stamp: 72px; /* NAT 100 / NAT 1 */ --text-result: 64px; /* full-time scoreline */ --text-score: 52px; /* live match score digits */ --text-title: 44px; /* screen titles */ --text-section: 28px; /* section heads */ --text-ui: 16px; /* buttons, labels, body */ --text-micro: 12px; /* mono micro kickers — decoration only below 14px */ /* --- Typography: tracking --------------------------------------------- */ --tracking-display-tight: -0.02em; --tracking-mono-wide: 0.18em; --tracking-mono-max: 0.22em; --tracking-stamp: 0.1em; /* --- Motion ----------------------------------------------------------- */ --motion-snap: 120ms linear; /* all state changes */ --motion-dice-step: 60ms steps(1); /* D20 face churn cadence */ --ease-punch: cubic-bezier(.22, 1, .36, 1); /* slams, stamps, punches */ --ease-overshoot: cubic-bezier(.2, 1.5, .45, 1); /* visible overshoot */ --ease-steps-pop: steps(1, end); /* discrete pop-ins */ /* --- Z-index ---------------------------------------------------------- */ --z-base: 0; --z-raised: 4; --z-hover: 6; --z-chrome: 8; --z-modal: 40; --z-helper: 60; --z-flash: 95; --z-debug: 200; --z-drag: 999; /* --- Opacity ---------------------------------------------------------- */ --opacity-ghost: 0.22; --opacity-dim: 0.35; --opacity-disabled: 0.45; --opacity-muted: 0.6; --opacity-soft: 0.7; --opacity-strong: 0.85; /* --- Focus, scrollbar, selection chrome ------------------------------- */ --focus-ring: 3px solid var(--color-accent-blue); --focus-ring-offset: 2px; --scrollbar-size: 12px; /* --- Responsive breakpoints (reference, not contract) ----------------- */ --bp-desktop-xl: 1440px; --bp-desktop: 1024px; --bp-tablet: 768px; --bp-mobile: 360px; /* minimum supported viewport floor */ color-scheme: light; } /* ============================================================================ DARK theme — the same scorecard printed on dark warm paper. Overrides ONLY color-family tokens; structure/motion/type are theme-invariant. ============================================================================ */ [data-theme="dark"] { --color-bg: #14130F; --color-ink: #F4F1E8; --color-panel: #1E1C17; --color-panel-alt: #2A2720; --color-accent-blue: #5C7CFF; --color-accent-blue-text: #8DA2FF; --color-accent-yellow: #FFD400; /* unchanged — already high-luminance */ --color-select: var(--color-accent-yellow); /* dark bg needs the brighter yellow for selection/START */ --color-accent-red: #FF5C5C; --color-accent-red-text: #FF5C5C; /* red reads fine on dark at all sizes */ --color-accent-red-surface: #FF5C5C; /* dark: --color-on-dark is ink → ink-on-#FF5C5C 6.6:1 (T18 AA) */ --color-success: #00D973; --color-cream: #F1EEE4; /* D100 disc stays ink-dark in both themes */ --color-on-dark: #0A0A0A; /* text on accent fills flips to ink */ --color-scrim: rgba(0, 0, 0, 0.82); --color-shadow: var(--color-ink); /* white/cream hard shadow on dark — the dark-mode brutalist cut */ /* Text tints on dark warm paper (FD-005). Light muted creams over #14130F. */ --text-secondary: #B0AC9D; --text-tertiary: #87836F; --color-tier-supreme: #9B8CFF; --color-tier-great: #5C7CFF; --color-tier-excellent: #00D973; --color-tier-nice: #FFD400; --color-tier-regular: #C6CDD6; --color-tier-failure: #FF8A1E; --color-tier-catastrophic: #FF5C5C; --color-tier-disaster: #B3261E; /* Dark: supreme violet + great blue lighten, so their text flips to fixed ink; disaster stays deep → white. */ --on-tier-supreme: var(--ink-fixed); --on-tier-great: var(--ink-fixed); --color-rarity-legendary: #FFD400; --color-rarity-rare: #5C7CFF; --color-rarity-normal: #C6CDD6; --color-macro-glk: #FFD400; --color-macro-def: #5C7CFF; --color-macro-mid: #00D973; --color-macro-ata: #FF8A1E; /* START board (design 2A): the ink fill flips to cream in dark — highlight-on-ink needs a dark accent, and the frontier wash needs a dark straw tint. */ --color-highlight-soft: #3A3313; --color-on-ink-accent: #8A5A00; /* Road ⑂ diamonds live on theme-adaptive screens — dark straw tint. */ --color-highlight-pale: #332D10; color-scheme: dark; }