/* Shared design tokens + themes for the whole site (hub + all games). The selected theme is stored in localStorage as `site.theme` and applied via a data-theme attribute on . Semantic status colors (good / bad / gold) stay constant across themes so game cues never lose meaning; each theme restyles the background, accents, text, and surfaces. */ :root { --radius: 18px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* Semantic status — constant across every theme */ --good: #38e19a; --good-2: #14c07a; --bad: #ff5d6c; --gold: #ffd24a; /* Default theme: Dark Elegance */ --bg: #0b0f1a; --bg-2: #121829; --card: rgba(255, 255, 255, 0.045); --card-border: rgba(255, 255, 255, 0.09); --text: #eef2fb; --muted: #8b95ad; --accent: #6c8cff; --accent-2: #b06cff; } :root[data-theme="rose-gold"] { --bg: #140a10; --bg-2: #1e1017; --card: rgba(255, 255, 255, 0.05); --card-border: rgba(255, 255, 255, 0.10); --text: #fdeef4; --muted: #b98ea2; --accent: #ff5d8f; --accent-2: #ffb26c; } :root[data-theme="emerald"] { --bg: #07130f; --bg-2: #0d1e19; --card: rgba(255, 255, 255, 0.05); --card-border: rgba(255, 255, 255, 0.10); --text: #e9fbf4; --muted: #7fa99b; --accent: #2fe0a8; --accent-2: #38b6ff; } :root[data-theme="ember"] { --bg: #140d07; --bg-2: #1f150c; --card: rgba(255, 255, 255, 0.05); --card-border: rgba(255, 255, 255, 0.10); --text: #fdf3e9; --muted: #b39a80; --accent: #ffb24a; --accent-2: #ff6a3d; } /* Shared tactile press feedback (see /js/press.js) */ @keyframes tapPop { 0%, 100% { transform: scale(1); } 40% { transform: scale(0.93); } } .tap-fx { animation: tapPop 0.16s ease; } :root[data-theme="mono"] { --bg: #0c0d10; --bg-2: #16181d; --card: rgba(255, 255, 255, 0.05); --card-border: rgba(255, 255, 255, 0.11); --text: #f2f4f8; --muted: #9aa0ac; --accent: #c7ccd6; --accent-2: #8b93a3; }