/* ========================================================================== GRIDIRON — design tokens All color/spacing/type values used across gridiron.html MUST come from here. THEME — "NIGHT GAME" accent : floodlit turf green #3ba94f (actions, progress, offense unit) secondary : chalk white #f4f6f1 (rules, hash marks, top of text ramp) tertiary : helmet metallic #c2c8cf (OVR badge + card chrome ONLY) surfaces : near-black, faint cool-green cast units : offense #3ba94f / defense #4a93d6 / special teams #e0a33d Rationale: NEON DRAFT owns gold; reusing it would make the two games indistinguishable in screenshot QA. Green is football's native semantic color; chalk-white is the sport's own graphic language (yard lines); metallic is reserved for the Madden-style OVR badge so the accent green never competes with the number the game is built around. Mirrored from the header block in js/gridiron-data.js — keep in sync. NOTE: gridiron.html must load Barlow Condensed + Inter + JetBrains Mono from Google Fonts (same pattern as index.html's ). ========================================================================== */ :root { color-scheme: dark; /* Surfaces */ --c-bg: #080a08; --c-bg-deep: #040504; --c-panel: #0e110e; --c-panel-2: #141814; --c-panel-3: #1b201b; --c-overlay: rgba(3, 5, 3, 0.84); /* Lines */ --c-line: #232823; --c-line-2: #303630; --c-line-strong: #444b44; /* Turf (accent ramp) */ --c-turf: #3ba94f; --c-turf-bright: #63d977; --c-turf-dim: #24682f; --c-turf-deep: #113317; --c-turf-a10: rgba(59, 169, 79, 0.10); --c-turf-a20: rgba(59, 169, 79, 0.20); --c-turf-a35: rgba(59, 169, 79, 0.35); --c-accent: var(--c-turf); /* Chalk */ --c-chalk: #f4f6f1; --c-chalk-dim: rgba(244, 246, 241, 0.55); --c-chalk-line: rgba(244, 246, 241, 0.14); /* Helmet metallic */ --c-metal: #c2c8cf; --c-metal-bright: #e6eaee; --c-metal-dim: #8c939b; --c-metal-deep: #4c5259; /* Text */ --c-text: #eef1ec; --c-text-2: #a3a9a2; --c-text-3: #6b716a; --c-text-inv: #080a08; /* Unit colors */ --c-off: #3ba94f; --c-def: #4a93d6; --c-st: #e0a33d; /* OVR tier ramp (Madden card tiers) */ --c-ovr-elite: #63d977; /* 90+ */ --c-ovr-great: #3ba94f; /* 80-89 */ --c-ovr-good: #c2c8cf; /* 70-79 */ --c-ovr-avg: #8c939b; /* 60-69 */ --c-ovr-low: #5c625c; /* <60 */ /* Skill-category accent colors */ --c-cat-passing: #6fb4e8; --c-cat-rushing: #63d977; --c-cat-receiving: #8fd6c0; --c-cat-blocking: #c2c8cf; --c-cat-passrush: #e0765a; --c-cat-coverage: #4a93d6; --c-cat-tackling: #d99a4a; --c-cat-athleticism: #a8d95e; --c-cat-kicking: #e0a33d; --c-cat-intangibles: #a58fd6; /* Status */ --c-ok: #5ec27a; --c-warn: #e0a33d; --c-bad: #d9534a; /* Glows */ --glow-sm: 0 0 12px -4px var(--c-turf-a35); --glow-md: 0 0 22px -6px rgba(59, 169, 79, 0.55); --glow-lg: 0 0 46px -8px rgba(59, 169, 79, 0.45); --glow-metal: 0 0 20px -8px rgba(194, 200, 207, 0.5); /* Fonts */ --font-display: "Barlow Condensed", "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif; --font-body: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace; --font-num: var(--font-display); /* Type scale */ --fs-display: clamp(2.75rem, 7vw, 4.75rem); --fs-h1: 2.25rem; --fs-h2: 1.4rem; --fs-h3: 1rem; --fs-label: 0.6875rem; --fs-body: 0.9375rem; --fs-small: 0.8125rem; --fs-stat-num: 2rem; --fs-stat-num-sm: 1.125rem; --fs-ovr: clamp(3.5rem, 9vw, 5.5rem); --fs-ovr-sm: 1.75rem; --fs-attr-num: 0.9375rem; /* Spacing */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* Radii */ --r-xs: 1px; --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-pill: 999px; /* Borders */ --bw: 1px; --bw-2: 2px; /* Motion */ --dur-fast: 120ms; --dur: 180ms; --dur-slow: 320ms; --ease: cubic-bezier(0.2, 0.7, 0.3, 1); --dur-spin: 900ms; --dur-spin-reduced: 150ms; --ease-land: cubic-bezier(0.16, 1, 0.3, 1); }