/* Light theme — default (no .dark class on ) */
:root {
/* Keeps native form-control chrome (date/time picker icons, scrollbars)
in sync with the app's manually-toggled .dark class below, rather
than the OS's own light/dark preference — without this, a dark-theme
date input still gets the browser's light-mode calendar icon glyph,
which is nearly invisible against a dark field background. */
color-scheme: light;
--bg-page: #f7f5f0;
--bg-surface: #ffffff;
--bg-card: #ffffff;
--bg-sidebar: #ffffff;
--bg-hover: #eee9de;
--border-subtle: #e4ddd0;
--border-card: rgba(0,0,0,0.08);
--glass-bg: rgba(255,255,255,0.75);
--text-primary: #1f2430;
--text-secondary: #5b6478;
--text-muted: #9aa1b0;
--gold: #b8842a;
--gold-dim: rgba(184,132,42,0.14);
--gold-glow: 0 0 24px rgba(184,132,42,0.18);
--emerald: #16a34a;
--emerald-dim: rgba(22,163,74,0.12);
--sky: #2563eb;
--red: #dc2626;
--red-dim: rgba(220,38,38,0.12);
--amber: #d97706;
--amber-dim: rgba(217,119,6,0.12);
/* Legacy custom properties — read directly via getComputedStyle() by
chart.js. Keep the names, point them at the new
palette so those scripts stay themed without any JS changes.
--legend-color uses --text-primary (not --text-secondary) so chart
legend/tooltip/datalabel text stays high-contrast against both the
page background and the colored pie slices in both themes. */
--bg-color: var(--bg-card);
--text-color: var(--text-primary);
--legend-color: var(--text-primary);
--tooltip-bg: var(--bg-surface);
--income-color: var(--emerald);
--expense-color: var(--red);
--balance-color: var(--gold);
/* Note/event color tokens — a closed six-color set shared by Notes and
Calendar's time-blocked events, namespaced (--note-*) rather than
reusing --emerald/--red/--sky/--amber, which already carry income/
expense/danger meaning elsewhere in the app; reusing those directly
here would be confusing. Read live via getComputedStyle() (see
static/js/chart.js's cssVar() for the established pattern) rather
than duplicated as hex literals in JS, so a color always renders
correctly in whichever theme is active. */
--note-sage-bg: #eef3e6; --note-sage-border: #cfdfbe; --note-sage-text: #3f5c2b;
--note-coral-bg: #fbeae4; --note-coral-border: #f0c3b3; --note-coral-text: #a34527;
--note-plum-bg: #f3e8f4; --note-plum-border: #ddc0e0; --note-plum-text: #6b3d72;
--note-slate-bg: #ecedf3; --note-slate-border: #c9cfdd; --note-slate-text: #3d4a5c;
--note-sky-bg: #e7eefb; --note-sky-border: #bcd2f0; --note-sky-text: #2c5599;
--note-amber-bg: #fdf1dc; --note-amber-border: #f0d69f; --note-amber-text: #8a5f11;
}
/* Dark theme — toggled by theme.js adding .dark to */
.dark {
color-scheme: dark;
--bg-page: #12151e;
--bg-surface: #181d2a;
--bg-card: #1e2435;
--bg-sidebar: #0e1118;
--bg-hover: #242b3d;
--border-subtle: #252d40;
--border-card: rgba(255,255,255,0.06);
--glass-bg: rgba(30,36,53,0.7);
--text-primary: #f0ede8;
--text-secondary: #8b95a8;
--text-muted: #4a5468;
--gold: #d4a843;
--gold-dim: rgba(212,168,67,0.15);
--gold-glow: 0 0 24px rgba(212,168,67,0.18);
--emerald: #22c55e;
--emerald-dim: rgba(34,197,94,0.12);
--sky: #60a5fa;
--red: #ef4444;
--red-dim: rgba(239,68,68,0.12);
--amber: #f59e0b;
--amber-dim: rgba(245,158,11,0.12);
--note-sage-bg: #1f2a1a; --note-sage-border: #3a4a2c; --note-sage-text: #a3cf8a;
--note-coral-bg: #2c1e19; --note-coral-border: #4a3128; --note-coral-text: #e6a17e;
--note-plum-bg: #26202c; --note-plum-border: #443a4c; --note-plum-text: #d4a3d8;
--note-slate-bg: #1c212e; --note-slate-border: #313a4d; --note-slate-text: #b0b9cf;
--note-sky-bg: #182233; --note-sky-border: #2c405c; --note-sky-text: #93b8ec;
--note-amber-bg: #2b2213; --note-amber-border: #4a3c1f; --note-amber-text: #edc370;
}
/* =========================
Global
========================= */
body {
background: var(--bg-page);
color: var(--text-primary);
font-family: 'Inter', sans-serif;
}
h1, h2, h3, .stat-number {
font-family: 'Fraunces', serif;
}
/* Glass card — the primary card style everywhere */
.glass-card {
background: var(--glass-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--border-card);
border-radius: 16px;
}
/* Section eyebrow labels */
.eyebrow {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-secondary);
font-family: 'Inter', sans-serif;
}
/* Money figures */
.scenario-money {
font-family: 'JetBrains Mono', monospace;
/* A leading "-" on a negative value ("-$3,000.00") is a recognized
soft break point in standard text line-breaking (the ASCII hyphen
is a break-after character even without any whitespace around it),
so on a narrow enough column the browser can legally wrap right
after the sign, splitting it onto its own line above the amount.
These are short, atomic values, never meant to wrap. */
white-space: nowrap;
}
.money-positive { color: var(--emerald); }
.money-negative { color: var(--red); }
.money-gold { color: var(--gold); font-family: 'JetBrains Mono', monospace; }
/* Verdict badges */
.badge-do-it { background: var(--emerald-dim); color: var(--emerald); border: 1px solid rgba(34,197,94,0.3); padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.badge-wait { background: rgba(245,158,11,0.12); color: var(--amber); border: 1px solid rgba(245,158,11,0.3); padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.badge-bad { background: var(--red-dim); color: var(--red); border: 1px solid rgba(239,68,68,0.3); padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; }
/* Stat number style */
.stat-number {
font-family: 'Fraunces', serif;
font-size: 28px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.1;
/* Same fix as .scenario-money above: a leading "-" on a negative
stat (Net Balance going negative, etc.) is a legal line-break
point on its own, so a narrow enough card can wrap right after
the sign without this. */
white-space: nowrap;
}
/* Buttons */
.btn-primary {
background: var(--gold);
color: #000;
border-radius: 8px;
font-weight: 600;
border: none;
transition: filter 0.15s ease, transform 0.1s ease;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: scale(0.97); }
.btn-secondary {
background: var(--bg-card);
color: var(--text-primary);
border: 1px solid var(--border-subtle);
border-radius: 8px;
transition: background 0.15s ease, transform 0.1s ease;
}
.btn-secondary:hover { background: var(--bg-hover); }
.btn-secondary:active { transform: scale(0.97); }
.btn-danger {
color: var(--red);
border-radius: 8px;
transition: background 0.15s ease, transform 0.1s ease;
}
.btn-danger:hover { background: var(--red-dim); }
.btn-danger:active { transform: scale(0.97); }
/* Inputs */
.field-input {
background: var(--bg-sidebar);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
border-radius: 8px;
padding: 10px 14px;
}
.field-input::placeholder { color: var(--text-muted); }
.field-input:focus {
outline: 2px solid rgba(212,168,67,0.45);
outline-offset: 1px;
}
/* iOS Safari paints its own solid-black chrome behind a date/time
input's value text regardless of the background we set on the
element, which reads as a mismatched black pill next to the other
form fields. -webkit-appearance:none stops it from doing that.
text-align:inherit makes the value follow whatever alignment the
input itself already has (left by default, or right/center where a
specific form explicitly sets it) instead of Safari's forced center. */
input[type="date"],
input[type="time"] {
-webkit-appearance: none;
appearance: none;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
text-align: inherit;
}
/* Same native-chrome mismatch as date/time inputs above, but for