/* * theme.css — Shared design tokens and base styles * * Imported by both landing.html and scoreboard.html. * Contains: Google Fonts, CSS variables (dark + light), and body base styles. * * Dark theme is the default (:root). * Light theme activates via the `light` class on or * (landing uses body.light, scoreboard uses html.light — both are declared here). */ @import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Barlow:wght@300;400;500;600&display=swap"); /* ── Dark theme (default) ── */ :root { --bg: #0a0e14; --surface: #111720; --surface2: #162030; --border: #1e2a38; --border2: #253545; --accent: #00c896; --accent-dim: #00533e; --accent-glow: rgba(0, 200, 150, 0.15); --red: #ff4d4d; --gold: #f5c842; --silver: #a8b8c8; --bronze: #cd7f3a; --text: #e8edf3; --text2: #8fa3b8; --muted: #5a6a7a; --input-bg: #0f1824; --card-bg: #111d2b; --hover-bg: rgba(0, 200, 150, 0.07); --selected-bg: rgba(0, 200, 150, 0.13); } /* ── Light theme ── */ /* Applied via html.light (scoreboard) or body.light (landing) */ html.light, body.light { --bg: #f0f4f8; --surface: #ffffff; --surface2: #e8eef5; --border: #c8d5e2; --border2: #b0c0d0; --accent: #008f6b; --accent-dim: #004d3a; --accent-glow: rgba(0, 143, 107, 0.1); --red: #d93636; --gold: #c9a000; --silver: #607080; --bronze: #a05a20; --text: #1a2634; --text2: #4a6070; --muted: #3a5268; --input-bg: #ffffff; --card-bg: #f8fafb; --hover-bg: rgba(0, 143, 107, 0.06); --selected-bg: rgba(0, 143, 107, 0.1); } /* ── Base body styles ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: "Barlow", sans-serif; transition: background 0.3s, color 0.3s; }