/* theme.css — dark-mode palette override, shared by every page. Pages style themselves through the :root CSS variables; flipping data-theme="dark" on re-skins everything. theme.js applies the stored preference before first paint. */ :root[data-theme="dark"] { --paper: #171310; --paper-2: #211b15; --paper-edge: #4a3a2a; --ink: #e8ddc8; --ink-soft: #c9b895; --ink-faded: #8a7559; --red: #c65a4a; --gold: #c9973f; --green: #7fa35c; --sq-light: #6f5d40; --sq-dark: #332818; --shadow: rgba(0, 0, 0, .55); } /* The page background gradients are hardcoded per page — override them */ :root[data-theme="dark"], :root[data-theme="dark"] body { background: radial-gradient(ellipse at 20% 10%, #1e1712, transparent 55%), radial-gradient(ellipse at 80% 90%, #261d13, transparent 55%), var(--paper); } /* Pieces: white stays light; black keeps its dark body but gains a light outline so it reads on the darkened squares */ :root[data-theme="dark"] .piece.white { color: #f7edd6; } :root[data-theme="dark"] .piece.black { color: #14100c; text-shadow: 0 0 2px rgba(232, 221, 200, .6), 0 1px 0 rgba(232, 221, 200, .25); } /* Elements that hardcode the light paper color for contrast */ :root[data-theme="dark"] .check-banner, :root[data-theme="dark"] .turn-btn.confirm { color: #171310; }