/* * Light/dark theme tokens. Light is the default look (:root). Dark follows * system preference automatically (prefers-color-scheme), and either can be * pinned explicitly via [data-theme] on - set by the light/dark * switch in the header (see assets/js/app.js) and applied pre-paint by the * views/partials/theme_init.php snippet included in every page's . * The [data-theme] rules use higher specificity than the plain :root / * @media blocks, so an explicit choice always wins over the OS preference. * * Dark categorical + status hex values are the dark-surface-validated steps * from the dataviz palette (checked with scripts/validate_palette.js against * the dark --surface below), not arbitrary picks. */ :root { --bg: #F2F6F1; --surface: #FFFFFF; --surface-2: #EAF1E8; --primary: #17583F; --primary-ink: #FFFFFF; --gold: #C79310; --danger: #B93A2B; --ink: #10201A; --ink-muted: #5B6B62; --border: #E1E8DF; --safe-bg: #E7F3EA; --warning-bg: #FBF1DC; --danger-bg: #FBE9E6; --radius-sm: 14px; --radius-lg: 18px; --font-ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Categorical accents for tagging (categories, accounts) - identity only, never used for safe/warning/danger status which stays green/gold/red. */ --cat-blue: #2a78d6; --cat-aqua: #1baf7a; --cat-yellow: #eda100; --cat-green: #008300; --cat-violet: #4a3aa7; --cat-red: #e34948; --cat-magenta: #e87ba4; --cat-orange: #eb6834; /* Dashboard stat-tile gradients */ --grad-income: linear-gradient(135deg, #17583F 0%, #1baf7a 100%); --grad-expense: linear-gradient(135deg, #B93A2B 0%, #eb6834 100%); --grad-balance: linear-gradient(135deg, #17583F 0%, #2a78d6 100%); } @media (prefers-color-scheme: dark) { :root { --bg: #0B1220; --surface: #141D33; --surface-2: #101A30; --primary: #0CA30C; --primary-ink: #FFFFFF; --gold: #FAB219; --danger: #FF6B6B; --ink: #E8ECF6; --ink-muted: #8B95B3; --border: rgba(255, 255, 255, 0.08); --safe-bg: rgba(12, 163, 12, 0.16); --warning-bg: rgba(250, 178, 25, 0.16); --danger-bg: rgba(208, 59, 59, 0.18); --cat-blue: #3987E5; --cat-aqua: #199E70; --cat-yellow: #C98500; --cat-green: #0CA30C; --cat-violet: #9085E9; --cat-red: #FF6B6B; --cat-magenta: #D55181; --cat-orange: #D95926; --grad-income: linear-gradient(135deg, #0CA30C 0%, #199E70 100%); --grad-expense: linear-gradient(135deg, #D03B3B 0%, #D95926 100%); --grad-balance: linear-gradient(135deg, #1E3A6E 0%, #3987E5 100%); --glow-blue: #3987E5; --glow-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 16px 40px -16px rgba(0, 0, 0, 0.65); } } :root[data-theme="dark"] { --bg: #0B1220; --surface: #141D33; --surface-2: #101A30; --primary: #0CA30C; --primary-ink: #FFFFFF; --gold: #FAB219; --danger: #FF6B6B; --ink: #E8ECF6; --ink-muted: #8B95B3; --border: rgba(255, 255, 255, 0.08); --safe-bg: rgba(12, 163, 12, 0.16); --warning-bg: rgba(250, 178, 25, 0.16); --danger-bg: rgba(208, 59, 59, 0.18); --cat-blue: #3987E5; --cat-aqua: #199E70; --cat-yellow: #C98500; --cat-green: #0CA30C; --cat-violet: #9085E9; --cat-red: #FF6B6B; --cat-magenta: #D55181; --cat-orange: #D95926; --grad-income: linear-gradient(135deg, #0CA30C 0%, #199E70 100%); --grad-expense: linear-gradient(135deg, #D03B3B 0%, #D95926 100%); --grad-balance: linear-gradient(135deg, #1E3A6E 0%, #3987E5 100%); --glow-blue: #3987E5; --glow-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 16px 40px -16px rgba(0, 0, 0, 0.65); } :root[data-theme="light"] { --bg: #F2F6F1; --surface: #FFFFFF; --surface-2: #EAF1E8; --primary: #17583F; --primary-ink: #FFFFFF; --gold: #C79310; --danger: #B93A2B; --ink: #10201A; --ink-muted: #5B6B62; --border: #E1E8DF; --safe-bg: #E7F3EA; --warning-bg: #FBF1DC; --danger-bg: #FBE9E6; --cat-blue: #2a78d6; --cat-aqua: #1baf7a; --cat-yellow: #eda100; --cat-green: #008300; --cat-violet: #4a3aa7; --cat-red: #e34948; --cat-magenta: #e87ba4; --cat-orange: #eb6834; --grad-income: linear-gradient(135deg, #17583F 0%, #1baf7a 100%); --grad-expense: linear-gradient(135deg, #B93A2B 0%, #eb6834 100%); --grad-balance: linear-gradient(135deg, #17583F 0%, #2a78d6 100%); --glow-blue: none; --glow-shadow: none; }