/* ═══════════════════════════════════════════════════════════════════════════ THEMES — the only place colors, fonts, radii & shadows live. Everything in styles.css references these via var(), so changing a theme never touches component structure. To experiment WITHOUT losing what you have: 1. Copy a whole theme block below, give it a new [data-theme="name"]. 2. Tweak its tokens. The other themes are completely untouched. 3. Register it in THEMES in app.js so it shows in the Theme picker. New fonts: vendor the woff2 into public/fonts/ + fonts.css first, then point --serif / --sans / --mono at it in your theme. Token contract (a theme may override any of these): --bg --panel --panel-2 --panel-hover --panel-float surfaces --line --line-strong hairlines --ink --ink-2 --ink-3 text (primary→faint) --green --green-bright --green-dim money in / positive --red --red-dim money out / negative --gold --gold-dim write-offs / accent --blue --blue-dim hidden / info --serif --sans --mono fonts --r --r-sm --shadow --sidebar-w shape ═══════════════════════════════════════════════════════════════════════════ */ /* ── Midnight (default dark) ───────────────────────────────────────────────── Deep green-black ink, warm paper text, money-green / coral / gold. */ :root, html[data-theme="dark"], html[data-theme="midnight"] { color-scheme: dark; --bg: #0b100d; --panel: #121814; --panel-2: #161e19; --panel-hover: #1a231d; --panel-float: #1a231d; --line: rgba(228, 234, 223, 0.07); --line-strong: rgba(228, 234, 223, 0.14); --ink: #ece9dc; --ink-2: #a4b0a3; --ink-3: #66746a; --green: #4ed195; --green-bright: #6fe7ae; --green-dim: rgba(78, 209, 149, 0.11); --red: #ff7c66; --red-dim: rgba(255, 124, 102, 0.10); --gold: #e8bc5e; --gold-dim: rgba(232, 188, 94, 0.12); --blue: #8fb7d9; --blue-dim: rgba(143, 183, 217, 0.10); --serif: 'Fraunces', Georgia, serif; --sans: 'Spline Sans', -apple-system, sans-serif; --mono: 'Spline Sans Mono', ui-monospace, monospace; --r: 1.4rem; --r-sm: 0.9rem; --shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1rem 3rem -1.8rem rgba(0,0,0,0.8); --sidebar-w: 21.8rem; } /* ── Morning (light) — warm paper, deep-green ink ───────────────────────────── */ html[data-theme="light"], html[data-theme="morning"] { color-scheme: light; --bg: #f0ede3; --panel: #f8f6ee; --panel-2: #fffdf6; --panel-hover: #edeade; --panel-float: #fffdf6; --line: rgba(28, 38, 30, 0.09); --line-strong: rgba(28, 38, 30, 0.17); --ink: #1d261f; --ink-2: #4e5c51; --ink-3: #83907f; --green: #178a55; --green-bright: #0d7a49; --green-dim: rgba(23, 138, 85, 0.10); --red: #c44f39; --red-dim: rgba(196, 79, 57, 0.09); --gold: #a37b1e; --gold-dim: rgba(163, 123, 30, 0.11); --blue: #3f6f9e; --blue-dim: rgba(63, 111, 158, 0.09); --serif: 'Fraunces', Georgia, serif; --sans: 'Spline Sans', -apple-system, sans-serif; --mono: 'Spline Sans Mono', ui-monospace, monospace; --r: 1.4rem; --r-sm: 0.9rem; --shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 0.8rem 2.4rem -1.6rem rgba(40, 52, 42, 0.35); --sidebar-w: 21.8rem; } /* Per-theme atmosphere tweaks (the fixed background glow / grain). */ html[data-theme="light"] body::before, html[data-theme="morning"] body::before { background: radial-gradient(90rem 42rem at 18% -8%, rgba(23, 138, 85, 0.06), transparent 60%), radial-gradient(70rem 38rem at 85% -12%, rgba(163, 123, 30, 0.05), transparent 60%); } html[data-theme="light"] body::after, html[data-theme="morning"] body::after { opacity: 0.5; } html[data-theme="light"] .btn.primary, html[data-theme="morning"] .btn.primary { color: #fdfcf5; } /* ── Cobalt (dark, tech/modern) ────────────────────────────────────────────── Pure navy near-black surfaces, electric sky-blue signature, fresh spring-mint money-in. High contrast (ink 17.7:1). Linear/Vercel/Raycast energy. */ html[data-theme="cobalt"] { color-scheme: dark; --bg: #070b14; --panel: #0e1424; --panel-2: #131b2f; --panel-hover: #18213a; --panel-float: #1b2540; --line: rgba(200, 214, 245, 0.08); --line-strong: rgba(200, 214, 245, 0.16); --ink: #eef3ff; --ink-2: #a3b2d4; --ink-3: #6c7c9e; --green: #4ce5a4; --green-bright: #74f5c0; --green-dim: rgba(76, 229, 164, 0.12); --red: #ff7385; --red-dim: rgba(255, 115, 133, 0.11); --gold: #f5c24a; --gold-dim: rgba(245, 194, 74, 0.12); --blue: #3ea8ff; --blue-dim: rgba(62, 168, 255, 0.13); --serif: 'Fraunces', Georgia, serif; --sans: 'Spline Sans', -apple-system, sans-serif; --mono: 'Spline Sans Mono', ui-monospace, monospace; --r: 1.4rem; --r-sm: 0.9rem; --shadow: 0 1px 0 rgba(150, 190, 255, 0.05) inset, 0 1rem 3rem -1.8rem rgba(0, 4, 16, 0.92); --sidebar-w: 21.8rem; } /* Cool blue/cyan atmosphere so the fixed background glow stays on-theme (the default glow is green — override it here). */ html[data-theme="cobalt"] body::before { background: radial-gradient(90rem 42rem at 18% -8%, rgba(62, 168, 255, 0.10), transparent 60%), radial-gradient(70rem 38rem at 85% -12%, rgba(76, 229, 164, 0.05), transparent 60%); } /* ── Slate (EXAMPLE — delete or edit freely) ───────────────────────────────── A cooler, neutral dark that keeps money-green but swaps the display font to a system serif — shows that BOTH colors and fonts are themeable with no new assets. Duplicate this block to start your own. */ html[data-theme="slate"] { color-scheme: dark; --bg: #0d1013; --panel: #14181d; --panel-2: #191f26; --panel-hover: #1e252d; --panel-float: #1e252d; --line: rgba(220, 228, 236, 0.08); --line-strong: rgba(220, 228, 236, 0.16); --ink: #e6ebf1; --ink-2: #9aa6b3; --ink-3: #626d79; --green: #58d39a; --green-bright: #7ae7b3; --green-dim: rgba(88, 211, 154, 0.12); --red: #ff8a72; --red-dim: rgba(255, 138, 114, 0.11); --gold: #e6c15f; --gold-dim: rgba(230, 193, 95, 0.12); --blue: #7fb2e6; --blue-dim: rgba(127, 178, 230, 0.12); --serif: Georgia, 'Times New Roman', serif; /* font swap, no new asset */ --sans: 'Spline Sans', -apple-system, sans-serif; --mono: 'Spline Sans Mono', ui-monospace, monospace; --r: 1.2rem; --r-sm: 0.8rem; --shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1rem 3rem -1.8rem rgba(0,0,0,0.85); --sidebar-w: 21.8rem; }