/* ============================================================ KICKABOUT - theme.css SINGLE SOURCE OF TRUTH for all brand tokens. Loaded in the of every page. Pages must NOT redefine these tokens inline. All colour, type and spacing in any page comes from these tokens, never a hard-coded hex. See BRAND.md for the full system and rules. ============================================================ */ :root{ --bg:#F6F2E8; --panel:#FFFFFF; --panel2:#F1ECDD; --line:#E4DECC; --accent:#0B6E4F; --accent-dk:#0A5A41; --gold:#FFB703; --ink:#13231C; --ink-soft:#34433B; --muted:#6B7670; --muted-2:#93A39B; --line-soft:#EFE9D9; --good:#2E8B57; --bad:#C8462F; --radius-sm:9px; --radius:16px; --radius-lg:22px; --disp:'Anton',sans-serif; --ui:'Hanken Grotesk',system-ui,Arial,sans-serif; --lh-tight:1.1; --lh:1.5; --fs-1:12px; --fs-2:14px; --fs-3:16px; --fs-4:20px; --fs-5:28px; --fs-6:40px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --accent2:var(--gold); --amber:var(--gold); --pink:#E5247A; } body[data-theme=night]{ --bg:#08231A; --panel:#0E2C22; --panel2:#0C2419; --line:#1D3F33; --line-soft:#163328; --ink:#EAF3EE; --ink-soft:#C4D4CB; --muted:#9FB6AA; --muted-2:#7F968A; --accent:#13935F; --accent-dk:#0F7A4F; } @media (prefers-color-scheme: dark){ html:not([data-theme="light"]){ --bg:#08231A; --panel:#0E2C22; --panel2:#0C2419; --line:#1D3F33; --line-soft:#163328; --ink:#EAF3EE; --ink-soft:#C4D4CB; --muted:#9FB6AA; --muted-2:#7F968A; --accent:#13935F; --accent-dk:#0F7A4F; } } html[data-theme="dark"]{ --bg:#08231A; --panel:#0E2C22; --panel2:#0C2419; --line:#1D3F33; --line-soft:#163328; --ink:#EAF3EE; --ink-soft:#C4D4CB; --muted:#9FB6AA; --muted-2:#7F968A; --accent:#13935F; --accent-dk:#0F7A4F; } html[data-theme="light"]{ --bg:#F6F2E8; --panel:#FFFFFF; --panel2:#F1ECDD; --line:#E4DECC; --line-soft:#EFE9D9; --ink:#13231C; --ink-soft:#34433B; --muted:#6B7670; --muted-2:#93A39B; --accent:#0B6E4F; --accent-dk:#0A5A41; }