/* Design tokens shared by every page. Previously each HTML file defined its own :root with slightly different values for the same concepts (e.g. home.html's --accent was green, admin.html's --accent was yellow). This file is the single source of truth; pages that need a specific accent color use --accent-green or --accent-yellow directly instead of redefining --accent. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } :root { --bg: #07090f; --surface: #0d1524; --surface2: #111927; --border: #1a2a42; --accent-green: #00e5a0; --accent-blue: #0090ff; --accent-yellow:#e8c547; --accent-yellow-dim: #a88d2e; --danger: #ff4d6d; --text: #e2eaf6; --muted: #4a6080; --font-mono: 'DM Mono', monospace; --font-sans: 'Syne', sans-serif; --font-serif: 'Instrument Serif', Georgia, serif; --radius-sm: 6px; --radius-md: 9px; --radius-lg: 14px; --radius-xl: 16px; --space-2: 8px; --space-4: 16px; --space-5: 24px; --transition-fast: 0.15s; --transition-base: 0.2s; } /* Light theme override, toggled via .light class on . Only the home/checker page currently offers theme toggling; admin pages stay dark-only, so this block only changes behavior where .light is applied. */ html.light { --bg: #f4f6fb; --surface: #ffffff; --surface2: #eef1f7; --border: #d0d8e8; --accent-green: #00a673; --accent-blue: #0070cc; --accent-yellow:#b8920e; --danger: #d93055; --text: #111827; --muted: #6b7a99; } body { background: var(--bg); color: var(--text); font-family: var(--font-mono); /* No transition on body — background/color transitions on the root element cause a full-page repaint on every frame, which is the primary source of jank. Theme switching is instant; the visual change is fast enough without animation. */ } ::placeholder { color: var(--muted); } a { color: var(--accent-green); text-decoration: none; } a:hover { text-decoration: underline; }