/* Design tokens. Dark is the default palette; light is an explicit opt-in via [data-theme="light"] on , set by static/js/theme.js. */ :root { color-scheme: dark; --bg: #0b0f1a; --bg-elevated: #0f1524; --surface: #141b2d; --surface-hover: #1a2338; --border: #232d47; --border-strong: #2e3a5c; --text: #eef1fb; --text-muted: #8d97b8; --text-faint: #5c6684; --accent: #7c5cff; --accent-hover: #8f72ff; --accent-soft: rgba(124, 92, 255, 0.15); --accent-text: #ffffff; --win: #35d68a; --win-soft: rgba(53, 214, 138, 0.15); --loss: #ff5c7a; --loss-soft: rgba(255, 92, 122, 0.15); --push: #e8b13a; --push-soft: rgba(232, 177, 58, 0.15); --danger: #ff5c7a; --danger-hover: #ff7590; --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration: 180ms; --nav-height: 64px; /* Fixed regardless of theme: the plinko canvas is painted with light dots/colorful slots that assume a dark surface behind them. */ --board-bg: #0d1220; } :root[data-theme="light"] { color-scheme: light; --bg: #f4f5fa; --bg-elevated: #ffffff; --surface: #ffffff; --surface-hover: #eef0f8; --border: #e1e4ef; --border-strong: #cdd2e4; --text: #171a2b; --text-muted: #5c6280; --text-faint: #8b90ab; --accent: #6a45f0; --accent-hover: #5936da; --accent-soft: rgba(106, 69, 240, 0.1); --accent-text: #ffffff; --win: #1d9c63; --win-soft: rgba(29, 156, 99, 0.12); --loss: #e0294a; --loss-soft: rgba(224, 41, 74, 0.1); --push: #b3820c; --push-soft: rgba(179, 130, 12, 0.12); --danger: #e0294a; --danger-hover: #c71f3d; --shadow-sm: 0 2px 8px rgba(23, 26, 43, 0.06); --shadow: 0 8px 24px rgba(23, 26, 43, 0.08); --shadow-lg: 0 16px 48px rgba(23, 26, 43, 0.12); }