/* SCAN Soccer Game — design tokens (from planning doc 04). Change a value here and it updates everywhere. */ :root { /* Foundations */ --bg-charcoal: #111318; --surface-1: #181B21; --surface-2: #1E222A; --border: #2B303A; /* Text */ --text-primary: #F3F5F7; --text-muted: #8B939E; /* Brand + interactive */ --cyan: #5FD1F3; --cyan-press: #3FB6DB; /* Gameplay accents */ --volt: #E8FF3A; --green: #4ADE80; --orange: #FB923C; --red: #F87171; --gold: #C9A36B; /* Score bands */ --band-start: #F87171; --band-developing: #FB923C; --band-building: #E8FF3A; --band-consistent: #5FD1F3; --band-advanced: #4ADE80; --band-mastered: #C9A36B; /* Type scale */ --fs-display: 2.25rem; --fs-h1: 1.5rem; --fs-h2: 1.25rem; --fs-body: 1rem; --fs-small: 0.875rem; --fs-tiny: 0.75rem; /* Spacing / radius */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --r-card: 16px; --r-btn: 12px; --r-pill: 999px; --shadow: 0 6px 20px rgba(0,0,0,.35); --tap: 48px; } /* High-contrast mode (toggled by adding .hc to ) */ body.hc { --bg-charcoal: #000000; --surface-1: #0c0e12; --surface-2: #14171d; --border: #4a5160; --text-primary: #ffffff; --text-muted: #c3ccd6; } /* Reduced motion (toggled by adding .rm to , or OS setting) */ body.rm *, @media (prefers-reduced-motion: reduce) { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }