/* ========================================================================== THEME.CSS — Dark / Light mode CSS custom properties Toggle by adding data-theme="light" to element. Default is dark mode. ========================================================================== */ /* ── DARK MODE (default) ─────────────────────────────────────────────── */ :root { --bg-primary: #090d17; /* near-black navy */ --bg-secondary: #0f1524; /* panel / card background */ --bg-tertiary: #161e33; /* hover states, inset panels */ --gold: #c8a84b; /* primary gold accent */ --gold-bright: #e2c270; /* hover / highlight gold */ --gold-dim: #7a6428; /* subdued gold for borders */ --gold-glow: rgba(200, 168, 75, 0.15); --text-primary: #f0e8d5; /* warm cream — main text */ --text-secondary: #9a9080; /* muted body text */ --text-accent: #c8a84b; /* gold text */ --border-main: #1e2a44; /* structural borders */ --border-gold: #2e2210; /* gold-tinted borders */ --theme-icon: "☽"; /* moon for dark mode label */ } /* ── LIGHT MODE ──────────────────────────────────────────────────────── */ [data-theme="light"] { --bg-primary: #f5efdf; /* warm parchment */ --bg-secondary: #ede5cc; /* slightly darker parchment */ --bg-tertiary: #e0d5b8; /* card hover */ --gold: #9a7015; /* richer gold on light bg */ --gold-bright: #7a5810; /* darker on hover */ --gold-dim: #c8b070; /* subdued gold */ --gold-glow: rgba(154, 112, 21, 0.10); --text-primary: #160e04; /* near-black ink */ --text-secondary: #5a4e38; /* sepia-toned secondary text */ --text-accent: #9a7015; /* gold text */ --border-main: #cbbf9a; --border-gold: #b8a070; --theme-icon: "☀"; /* sun for light mode label */ }