/* ============================================================ Nest — design tokens Beige / pastel palette, calm & clean. Light + dark themes. Theme is applied by JS as ============================================================ */ :root { /* --- base surfaces (light) --- */ --bg: #f6f1e8; --surface: #fffcf7; --surface-2: #efe7da; --surface-3: #e7dcc9; --border: rgba(64, 56, 46, 0.10); --shadow: 0 2px 14px rgba(88, 70, 48, 0.07); --shadow-lg: 0 8px 30px rgba(88, 70, 48, 0.12); --overlay: rgba(56, 48, 38, 0.42); /* --- text --- */ --text: #403a30; --text-2: #7c7263; --text-3: #a89d8b; --text-on-accent: #fffdf8; /* --- pastel accents --- */ --sage: #7d9b7d; --sage-strong: #6b8a6b; --sage-soft: #dde7d8; --rose: #c8877f; --rose-soft: #f2dfda; --terracotta: #c37a58; --terracotta-soft: #f3e1d2; --lavender: #968cb5; --lavender-soft: #e5dfee; --sand: #b99d68; --sand-soft: #eee3c9; --gold: #c0a061; /* --- semantic --- */ --danger: #b3625a; --danger-soft: #f0dcd8; --ok: #7d9b7d; /* --- shape & type --- */ --radius: 18px; --radius-sm: 12px; --radius-pill: 999px; --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* --- chart marks (trends screen) --- Charts are single-hue with direct text labels; identity never rides on color. --chart-1 is a deepened sage validated at >=3:1 on --surface. If a future chart uses several series colors, re-run the dataviz palette validator on the full set first. */ --chart-1: #6b8a6b; --chart-grid: rgba(64, 56, 46, 0.10); } html[data-theme="dark"] { --bg: #211d17; --surface: #2b2620; --surface-2: #352f26; --surface-3: #3f382d; --border: rgba(240, 230, 214, 0.10); --shadow: 0 2px 14px rgba(0, 0, 0, 0.28); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.42); --overlay: rgba(10, 8, 5, 0.55); --text: #ece5d8; --text-2: #b1a795; --text-3: #827866; --text-on-accent: #1f1b15; --sage: #94b190; --sage-strong: #a5c2a1; --sage-soft: #313b2f; --rose: #d3a099; --rose-soft: #40312e; --terracotta: #d29070; --terracotta-soft: #42332a; --lavender: #aca1c8; --lavender-soft: #363044; --sand: #c9ad76; --sand-soft: #3d3627; --gold: #d2b378; --danger: #d38f86; --danger-soft: #442f2c; --ok: #94b190; --chart-1: #94b190; /* 6.4:1 on dark --surface */ --chart-grid: rgba(240, 230, 214, 0.10); }