/* Shared color tokens for every page. Dark is the default (:root); Light is an override activated by setting data-theme="light" on , done by applyTheme() in common.js based on the user's Settings choice. Keeping this in one file (instead of each page's own copy) is what makes Light Mode - and any future palette tweak - actually apply everywhere instead of silently drifting out of sync page by page. */ :root { --bg: #0a0b0e; --card: #15181e; --surface: #0f1218; --text: #ffffff; --text-muted: #8b92a5; --primary: #2962ff; --primary-hover: #1c4ee8; --win: #00e676; --loss: #ff3d00; --be: #ffb300; --border: #222631; --cs: 0 4px 20px rgba(0,0,0,0.25); --overlay-1: rgba(255,255,255,0.02); --overlay-2: rgba(255,255,255,0.06); --overlay-3: rgba(255,255,255,0.1); } :root[data-theme="light"] { --bg: #f4f6f9; --card: #ffffff; --surface: #eef1f5; --text: #10131a; --text-muted: #6b7280; --primary: #2962ff; --primary-hover: #1c4ee8; --win: #00a152; --loss: #e0301e; --be: #b8790a; --border: #dde1e8; --cs: 0 4px 20px rgba(15,23,42,0.08); --overlay-1: rgba(15,23,42,0.03); --overlay-2: rgba(15,23,42,0.05); --overlay-3: rgba(15,23,42,0.08); }