/** * TICKET-300: Premium Dual-Theme Token Layer * * Canonical source for all design tokens. * Loaded on all public pages, after styles.css (to override legacy vars). * Dark mode is default. Light mode applied via html.light-mode class. * * NOTE: html.light-mode is used (not body.light-mode) to enable FOUC-free * theme initialisation from . The class name "light-mode" matches the * spec. See js/theme-init.js and js/theme-toggle.js. * * Feature flags: all custom properties with --flag-* prefix default to 0 (off). * Enable them explicitly for feature-flag experiments only. */ /* ─── Dark theme tokens (default) ──────────────────────────────────────────── */ :root { /* Surface palette */ --ink-nocturnal: #0B0E14; --ink-elevated: #0F1720; --ink-panel: #121826; --ink-line: rgba(226, 232, 240, 0.10); /* Accent */ --gold-cerebral: #D4AF37; --gold-glow: rgba(212, 175, 55, 0.35); /* Text */ --vellum-white: #E2E8F0; --vellum-muted: rgba(226, 232, 240, 0.72); /* State */ --crimson-neural: #BE123C; --danger-glow: rgba(190, 18, 60, 0.18); --success-glow: rgba(212, 175, 55, 0.18); /* Typography stacks — safe fallbacks ensure baseline rendering without remote fonts */ --font-gnosis: "Cinzel", Georgia, "Times New Roman", serif; --font-logic: "JetBrains Mono", "Courier New", Courier, monospace; /* Motion */ --ease-shutter: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 150ms; --dur-mid: 280ms; --dur-slow: 400ms; --dur-breathe: 4000ms; /* ─── Semantic aliases (dark) ─────────────────────────────────────────────── */ --bg-page: var(--ink-nocturnal); --bg-surface: var(--ink-elevated); --bg-panel: var(--ink-panel); --border-subtle: var(--ink-line); --text-primary: var(--vellum-white); --text-muted: var(--vellum-muted); --accent: var(--gold-cerebral); --accent-glow: var(--gold-glow); --danger: var(--crimson-neural); --reward-glow: var(--success-glow); /* ─── Legacy token bridges (dark) ────────────────────────────────────────── */ /* Maps the existing styles.css variable names to the premium dark palette. */ /* styles.css component rules continue to work without modification. */ --background-color: var(--ink-nocturnal); --card-background: var(--ink-elevated); --text-color: var(--vellum-white); --text-light: var(--vellum-muted); --border-color: var(--ink-line); --secondary-color: var(--vellum-white); --secondary-dark: var(--ink-nocturnal); --secondary-light: rgba(226, 232, 240, 0.25); --primary-color: var(--gold-cerebral); --primary-dark: #B8971E; --primary-light: rgba(212, 175, 55, 0.12); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6); /* ─── Feature flags — all off by default ─────────────────────────────────── */ --flag-custom-cursor: 0; --flag-audio-click: 0; --flag-instructions-drawer: 0; --flag-ticker-counters: 0; --flag-progress-cap: 0; } /* ─── Light theme tokens ────────────────────────────────────────────────────── */ /* * Light mode feels like an expensive drafting table / printed manual. * It is NOT a naive inversion of dark mode — it uses flatter lines and * softer shadows instead of glow. */ html.light-mode { /* Spec-defined light tokens */ --vellum-base: #F8FAFC; --ink-blueprint: #1E293B; --ink-slate: #475569; --line-soft: #E2E8F0; --amber-logic: #B45309; --amber-soft: #FEF3C7; --rose-urgency: #9F1239; --surface-paper: #FFFFFF; --surface-stack-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05); /* Semantic aliases (light) */ --bg-page: var(--vellum-base); --bg-surface: var(--surface-paper); --bg-panel: #F1F5F9; --border-subtle: var(--line-soft); --text-primary: var(--ink-blueprint); --text-muted: var(--ink-slate); --accent: var(--amber-logic); --accent-glow: var(--amber-soft); --danger: var(--rose-urgency); --reward-glow: var(--amber-soft); /* Legacy token bridges (light) */ --background-color: var(--vellum-base); --card-background: var(--surface-paper); --text-color: var(--ink-blueprint); --text-light: var(--ink-slate); --border-color: var(--line-soft); --secondary-color: var(--ink-blueprint); --secondary-dark: #0F172A; --secondary-light: var(--ink-slate); --primary-color: var(--amber-logic); --primary-dark: #92400E; --primary-light: var(--amber-soft); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-lg: var(--surface-stack-shadow); } /* ─── Reduced motion ────────────────────────────────────────────────────────── */ /* * Collapse all motion durations when the user prefers reduced motion. * Components that use var(--dur-*) inherit this automatically. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-mid: 0ms; --dur-slow: 0ms; --dur-breathe: 0ms; } } /* ─── Base colour transition ─────────────────────────────────────────────────── */ /* * Smooth theme switch on explicit toggle. Does NOT apply on page load * (theme-init.js sets the class before paint so no transition fires). */ body { transition: background-color var(--dur-mid) var(--ease-shutter), color var(--dur-mid) var(--ease-shutter); } /* ─── Form element dark-mode fixes ──────────────────────────────────────────── */ /* * styles.css has a @media (prefers-color-scheme: dark) block that sets * hardcoded hex values on inputs/selects. These overrides ensure the * explicit token system wins regardless of OS preference. */ .inputs-container input, select, .word-length { background-color: var(--bg-surface); color: var(--text-color); border-color: var(--border-color); } html.light-mode .inputs-container input, html.light-mode select, html.light-mode .word-length { background-color: var(--surface-paper); color: var(--ink-blueprint); border-color: var(--line-soft); }