/* Tachos HC1 — Design Tokens v1.0 */ :root { /* Achtergrond */ --bg: #161615; --surface-1: #1E1E1C; --surface-2: #252523; --surface-3: #333331; --border: rgba(255,255,255,.08); /* Tekst */ --text-1: #F5F5F3; --text-2: #9B9B98; --text-3: #5A5A58; /* Accent — Onit rood */ --accent: #E30613; --accent-hover: #B0050F; --accent-muted: rgba(227,6,19,.15); /* Status */ --live: #E30613; --online: #22C55E; --tachos: #2E8B57; /* Teams — overschrijf via JS */ --team-home: #2F6BE4; --team-away: #F2A516; /* Font */ --font: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Type schaal */ --t-xs: 11px; --t-sm: 13px; --t-base: 15px; --t-lg: 17px; --t-xl: 22px; --t-2xl: 34px; --t-score-sm: 56px; --t-score-lg: 88px; --t-overlay: clamp(48px, 7vw, 96px); /* Spacing (4px grid) */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; /* Radii */ --r-sm:4px; --r-md:8px; --r-lg:12px; --r-pill:9999px; /* Tap-targets */ --tap:44px; --tap-score:68px; --tap-primary:56px; } /* ── Licht thema ───────────────────────────────────────────────────────────── Actief via systeemvoorkeur (prefers-color-scheme: light) of via data-theme="light" op (handmatige toggle). */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #F4F4F2; --surface-1: #FFFFFF; --surface-2: #EDEDEB; --surface-3: #E0E0DE; --border: rgba(0,0,0,.09); --text-1: #1A1A18; --text-2: #6B6B68; --text-3: #A8A8A5; } } :root[data-theme="light"] { --bg: #F4F4F2; --surface-1: #FFFFFF; --surface-2: #EDEDEB; --surface-3: #E0E0DE; --border: rgba(0,0,0,.09); --text-1: #1A1A18; --text-2: #6B6B68; --text-3: #A8A8A5; }