/* Design tokens — the single source of truth for colour, shadow, and sizing. Use these variables in app.css; never hard-code palette values. */ :root { --accent: #ff4f9a; --accent-deep: #e83a85; --accent-soft: #ffe3f0; --accent-mid: #ffb6d6; --fire1: #ff8a3d; --fire2: #ff3d3d; --bg: #fdf6ec; --surface: #ffffff; --border: #f0e4d3; --text: #3d2c3a; --muted: #a89aa4; --faint: #f3eada; --shadow: 0 4px 0 rgba(61,44,58,.08); --shadow-press: 0 1px 0 rgba(61,44,58,.08); --appbar-bg: rgba(253,246,236,.97); --dot-pattern: rgba(255,79,154,.05); --ink: #3d2c3a; /* always-dark bubble (toast, tooltip) — white text on top */ --info: #2f7fe0; /* blue — secondary actions (e.g. "Sync now") */ --bar-h: 62px; } /* Dark theme — warm near-black to keep the cozy davis-daily personality. Applied via data-theme="dark" on (see app.js theme logic). The accent pinks stay; surfaces, text and shadows flip. */ :root[data-theme="dark"] { --accent: #ff5ca3; --accent-deep: #d83b82; --accent-soft: #3c2531; /* dark mauve — used for "soft" tinted backgrounds */ --accent-mid: #b56b90; --fire1: #ff8a3d; --fire2: #ff5a5a; --bg: #1b1719; --surface: #262026; --border: #3a3137; --text: #f1e8ee; --muted: #9c8f98; --faint: #2c252a; --shadow: 0 4px 0 rgba(0,0,0,.32); --shadow-press: 0 1px 0 rgba(0,0,0,.32); --appbar-bg: rgba(27,23,25,.97); --dot-pattern: rgba(255,92,163,.06); --ink: #4a3f47; --info: #6aa8ff; /* brighter blue for the dark background */ }