/* CSS custom property tokens — all component styles reference these only. data-theme="dark" or "light" is set on by js/theme.js. */ :root[data-theme="dark"] { --bg-void: #06060F; --bg-base: #0D0D1A; --bg-surface: #13132B; --bg-card: #1E1E3A; --bg-border: #28284A; --accent: #C084FC; --accent-hover: #A855F7; --accent-press: #7C3AED; --accent-tint: #3B1F6E; --text-primary: #F8F8FF; --text-secondary: #B0B0D0; --text-muted: #6B6B8A; --epi-primary: #F97316; --epi-secondary: #FBBF24; --epi-tint: rgba(249,115,22,0.12); --bb-primary: #38BDF8; --bb-secondary: #818CF8; --bb-tint: rgba(56,189,248,0.10); --btn-text: #0D0D1A; --shadow: 0 4px 32px rgba(0,0,0,0.6); } :root[data-theme="light"] { --bg-void: #F4F1FC; --bg-base: #FAFAF8; --bg-surface: #F4F1FC; --bg-card: #FFFFFF; --bg-border: #E5E2DC; --accent: #7C3AED; --accent-hover: #6D28D9; --accent-press: #5B21B6; --accent-tint: #EDE9FE; --text-primary: #1A1714; --text-secondary: #4B4843; --text-muted: #8A8680; --epi-primary: #EA6C00; --epi-secondary: #D97706; --epi-tint: rgba(234,108,0,0.10); --bb-primary: #0284C7; --bb-secondary: #4338CA; --bb-tint: rgba(2,132,199,0.08); --btn-text: #FFFFFF; --shadow: 0 4px 24px rgba(0,0,0,0.10); } /* Smooth theme transitions — bg/color/border only */ *, *::before, *::after { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; } /* Game page body classes */ .game-epi { --game-primary: var(--epi-primary); --game-secondary: var(--epi-secondary); --game-tint: var(--epi-tint); } .game-breathbound { --game-primary: var(--bb-primary); --game-secondary: var(--bb-secondary); --game-tint: var(--bb-tint); }