/* themes.css — multi-theme system. Each theme sets the same semantic custom properties; the theme switcher writes data-theme on . Dark is the default (also used if no choice saved). */ :root, [data-theme='dark'] { --bg: #0a0a0a; --bg-elev: #151515; --bg-elev-2: #1d1d1d; --text: #f5f5f5; --text-muted: #a0a0a0; --text-faint: #6f6f6f; --accent: #ff6b35; --accent-dim: #ff8c5a; --on-accent: #ffffff; --border: #2a2a2a; --tag-bg: rgba(255, 107, 53, 0.10); --tag-border: rgba(255, 107, 53, 0.22); --soft-fill: rgba(255, 107, 53, 0.05); --shadow: 0 12px 40px rgba(0, 0, 0, 0.5); --glow-1: rgba(255, 107, 53, 0.06); --glow-2: rgba(255, 107, 53, 0.03); color-scheme: dark; } [data-theme='light'] { --bg: #fbf9f7; --bg-elev: #ffffff; --bg-elev-2: #f1ece8; --text: #1a1410; --text-muted: #5c544e; --text-faint: #8a817a; --accent: #e2531a; --accent-dim: #c4410f; --on-accent: #ffffff; --border: #e3ddd6; --tag-bg: rgba(226, 83, 26, 0.08); --tag-border: rgba(226, 83, 26, 0.22); --soft-fill: rgba(226, 83, 26, 0.06); --shadow: 0 12px 40px rgba(120, 90, 70, 0.14); --glow-1: rgba(226, 83, 26, 0.06); --glow-2: rgba(226, 83, 26, 0.03); color-scheme: light; } [data-theme='midnight'] { --bg: #080b1a; --bg-elev: #111634; --bg-elev-2: #1a2150; --text: #eef1ff; --text-muted: #9aa3d0; --text-faint: #6770a0; --accent: #6c8cff; --accent-dim: #93aaff; --on-accent: #08102e; --border: #232a55; --tag-bg: rgba(108, 140, 255, 0.12); --tag-border: rgba(108, 140, 255, 0.26); --soft-fill: rgba(108, 140, 255, 0.07); --shadow: 0 12px 40px rgba(0, 0, 0, 0.6); --glow-1: rgba(108, 140, 255, 0.10); --glow-2: rgba(108, 140, 255, 0.04); color-scheme: dark; } [data-theme='forest'] { --bg: #0a1410; --bg-elev: #122019; --bg-elev-2: #1a2e23; --text: #effaf2; --text-muted: #9bc0aa; --text-faint: #648472; --accent: #45c787; --accent-dim: #6fdca3; --on-accent: #06140d; --border: #21382c; --tag-bg: rgba(69, 199, 135, 0.12); --tag-border: rgba(69, 199, 135, 0.26); --soft-fill: rgba(69, 199, 135, 0.07); --shadow: 0 12px 40px rgba(0, 0, 0, 0.55); --glow-1: rgba(69, 199, 135, 0.09); --glow-2: rgba(69, 199, 135, 0.04); color-scheme: dark; } [data-theme='rose'] { --bg: #fdf6f7; --bg-elev: #ffffff; --bg-elev-2: #fae9ed; --text: #2a1419; --text-muted: #7a5660; --text-faint: #a98a92; --accent: #d6336c; --accent-dim: #b71e57; --on-accent: #ffffff; --border: #f0dde2; --tag-bg: rgba(214, 51, 108, 0.08); --tag-border: rgba(214, 51, 108, 0.22); --soft-fill: rgba(214, 51, 108, 0.06); --shadow: 0 12px 40px rgba(150, 70, 95, 0.16); --glow-1: rgba(214, 51, 108, 0.06); --glow-2: rgba(214, 51, 108, 0.03); color-scheme: light; } /* Theme swatch accents used in the picker (so each swatch shows its real accent). */ .swatch-dark { background: #ff6b35; } .swatch-light { background: #e2531a; } .swatch-midnight { background: #6c8cff; } .swatch-forest { background: #45c787; } .swatch-rose { background: #d6336c; }