/* ══════════════════════════════════ THEMES — token override sets, selected via data-theme on "original" is the default :root palette in base.css (no override block). Theme metadata (names, swatch colors) lives in js/settings-ui.js THEMES. ══════════════════════════════════ */ /* ── Midnight — pure black (OLED) + ice blue ── */ :root[data-theme="midnight"] { --bg: #000000; --s1: #0a0a0f; --s2: #12121a; --s3: #1b1b26; --s4: #242433; --text: #e5edf5; --dim: #8fa3b8; --muted: #45566b; --b: rgba(255,255,255,0.08); --b2: rgba(255,255,255,0.14); --acc: #4da3ff; --accd: #6fb2ff; --acc-lt: #b3d6ff; } /* ── Forest — green-tinted dark + emerald ── */ :root[data-theme="forest"] { --bg: #0b0f0c; --s1: #101712; --s2: #16211a; --s3: #1e2c22; --s4: #27382c; --text: #e4ede6; --dim: #94ac9b; --muted: #4a5f50; --b: rgba(255,255,255,0.07); --b2: rgba(255,255,255,0.13); --acc: #3ecf8e; --accd: #35b57c; --acc-lt: #b5f0d3; } /* ── Ember — warm charcoal + orange ── */ :root[data-theme="ember"] { --bg: #100c0a; --s1: #181110; --s2: #211816; --s3: #2c201d; --s4: #382a25; --text: #ede6e2; --dim: #b09a90; --muted: #64514a; --b: rgba(255,255,255,0.07); --b2: rgba(255,255,255,0.13); --acc: #f97316; --accd: #ea6a10; --acc-lt: #ffc499; } /* ── Light — paper + deep purple; semantic colors darkened for contrast ── */ :root[data-theme="light"] { --bg: #f4f2f7; --s1: #ffffff; --s2: #f0edf4; --s3: #e5e0ec; --s4: #d8d1e2; --text: #1d1a24; --dim: #5b556b; --muted: #9a93a8; --b: rgba(0,0,0,0.08); --b2: rgba(0,0,0,0.16); --acc: #8b3fd1; --accd: #7a36ba; --acc-lt: #6d28a8; /* on light bg the "highlight" accent must be darker, not lighter */ --ok: #059669; --warn: #b45309; --bad: #dc2626; --pr: #d97706; }