/* Warm cream/brown neutrals + a single red-orange accent, matching the /welcome landing page's palette (see the LANDING section of views.css and css/guides.css) so the signed-in app reads as the same product rather than a different tool bolted on behind it. --accent is used sparingly — primary buttons and focus states only, same restrained way the landing itself keeps bright color concentrated in its header/hero/CTAs rather than spread across every element. --positive/--negative stay their standard green/red on purpose: those are financial semantics (profit vs loss), not brand color, and overriding them would fight the convention every user already reads instinctively. */ :root { --bg: #fffaf5; --surface: #ffffff; --surface2: #fff3e6; --border: #f0e4d6; --accent: #c2410c; --accent-hover: #9a3412; --accent2: #16a34a; --accent3: #dc2626; --text: #241c14; --muted: #8a7d6d; --positive: #16a34a; --negative: #dc2626; --positive-bg: #f0faf3; --negative-bg: #fdf2f2; --focus-ring: rgba(194, 65, 12, 0.14); /* Neutral chart-series colors. Deliberately neither red nor green: a line chart's series colors are identity ("which line is this"), not judgment, and reusing --accent/--negative there made a perfectly healthy Property Value line read as a warning. Good/bad still comes through where it genuinely applies — --positive for equity build-up, and the dashed zero reference line on the cashflow chart. */ --series1: #2f6f8f; --series2: #7c5295; --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; } /* Dark theme — same warm-neutral identity as light mode (a dark cream-brown, not a cold blue-black), with the accent/semantic colors brightened rather than reused verbatim: the light-mode values (#c2410c, #16a34a, #dc2626) are tuned for contrast against a pale cream background and read muddy on a dark one, so this uses lighter tints of the same hues instead. Toggled via App.Theme (js/theme.js) by stamping data-theme on — see the no-flash inline script in index.html's for why that happens before any stylesheet paints. */ :root[data-theme="dark"] { --bg: #1c1712; --surface: #262019; --surface2: #2f2820; --border: #40352a; --accent: #e8590c; --accent-hover: #f2794a; --accent2: #22c55e; --accent3: #f04444; --text: #f3ece1; --muted: #a89985; --positive: #4ade80; --negative: #f87171; --positive-bg: rgba(74, 222, 128, 0.12); --negative-bg: rgba(248, 113, 113, 0.12); --focus-ring: rgba(232, 89, 12, 0.25); --series1: #6db4d4; --series2: #c49bd8; }