/** * Design tokens — theme-aware. Light is the default (:root); dark is an * opt-in override via [data-theme="dark"] on (see app.js's theme * toggle). Every consuming rule in app.css/about.css/admin.css reads * these same custom-property names regardless of theme — only the * values here change. Non-color tokens (spacing, radius, type, motion) * don't need two versions and stay theme-independent. */ :root { /* ---------- Theme-independent ---------- */ --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --fs-2xs: 0.625rem; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-display: 2.5rem; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-8: 48px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --ease-settle: cubic-bezier(0.2, 0.8, 0.2, 1); --safe-bottom: env(safe-area-inset-bottom, 0px); /* Brand blue — matches the reference mockup's palette. Previously a teal (#1f8b8b has equal green/blue channels — genuinely 50/50 cyan-green, which is why it kept reading as "greenish" no matter what else got fixed around it). Now a real blue. */ --river-500: #1d4ed8; --river-400: #2563eb; --river-300: #3b82f6; --river-500-rgb: 29, 78, 216; --river-400-rgb: 37, 99, 235; --river-300-rgb: 59, 130, 246; /* Severity — universal semantic meaning, same in both themes */ --risk-verylow: #2f9490; --risk-low: #16a34a; --risk-moderate: #d97706; --risk-high: #ea580c; --risk-extreme: #dc2626; --risk-verylow-rgb: 47, 148, 144; --risk-low-rgb: 22, 163, 74; --risk-moderate-rgb: 217, 119, 6; --risk-high-rgb: 234, 88, 12; --risk-extreme-rgb: 220, 38, 38; /* Support/Donate card accent — was an off-brand green that clashed with the rest of the app's blue/teal palette; now uses the same sky-blue family as the water-category badges. */ --support-accent-rgb: 37, 99, 235; /* ---------- Light theme (default) ---------- */ --ink-950: #eef3f4; --ink-900: #ffffff; --form-surface-light: #f7f9fa; --ink-800: #eef2f3; --ink-700: #e2e8e9; /* Chips/pills/inputs were using the same flat gray-green as dark mode's surfaces, which reads as dull/muddy against a white page — a very light icy-blue tint instead, echoing the mesh gradient's hue. */ --surface-tint-1: #ffffff; --surface-tint-2: #e9f4f5; --surface-raised: #ffffff; --mist-100: #16262d; --mist-300: #55676c; --slate-500: #8a9ba0; --glass-1: rgba(255, 255, 255, 0.72); --glass-2: rgba(255, 255, 255, 0.85); --glass-3: rgba(255, 255, 255, 0.94); --hairline: rgba(10, 30, 35, 0.08); --hairline-strong: rgba(10, 30, 35, 0.14); /* rgba(var(--overlay-rgb), X) is how every hover-tint/divider in the app is written — one token flips the base channel, every opacity value everywhere else stays untouched between themes. */ --overlay-rgb: 10, 30, 35; --page-bg-rgb: 238, 243, 244; --shadow-sheet: 0 -8px 32px rgba(20, 40, 46, 0.16); --shadow-card: 0 4px 16px rgba(20, 40, 46, 0.10); --shadow-float: 0 2px 10px rgba(20, 40, 46, 0.10), 0 8px 28px rgba(20, 40, 46, 0.08); --mesh-gradient: radial-gradient(at 15% 15%, rgba(var(--river-300-rgb), 0.18) 0px, transparent 55%), radial-gradient(at 85% 8%, rgba(var(--river-300-rgb), 0.14) 0px, transparent 50%), radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.7) 0px, transparent 60%), var(--ink-950); --gradient-primary: linear-gradient(155deg, var(--river-400), var(--river-500) 60%, #1e3a8a); --gradient-card: linear-gradient(155deg, rgba(var(--river-300-rgb), 0.07), rgba(255, 255, 255, 0.02)); --gradient-text: linear-gradient(120deg, var(--mist-100), var(--river-400)); } /* ---------- Dark theme (opt-in via toggle) ---------- */ [data-theme="dark"] { --ink-950: #0a1418; --ink-900: #0e1b21; --form-surface-light: var(--ink-800); --ink-800: #142a31; --ink-700: #1c3941; --surface-tint-1: var(--ink-700); --surface-tint-2: var(--ink-800); --surface-raised: #16262d; --mist-100: #eaf3f1; --mist-300: #b8c9c6; --slate-500: #6b8288; --glass-1: rgba(20, 42, 49, 0.72); --glass-2: rgba(22, 46, 54, 0.88); --glass-3: rgba(26, 52, 60, 0.94); --hairline: rgba(255, 255, 255, 0.08); --hairline-strong: rgba(255, 255, 255, 0.14); --overlay-rgb: 255, 255, 255; --page-bg-rgb: 10, 20, 24; --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.45); --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.3); --shadow-float: 0 2px 10px rgba(0, 0, 0, 0.28), 0 8px 28px rgba(0, 0, 0, 0.22); --mesh-gradient: radial-gradient(at 15% 15%, rgba(var(--river-400-rgb), 0.35) 0px, transparent 55%), radial-gradient(at 85% 8%, rgba(var(--river-300-rgb), 0.20) 0px, transparent 50%), radial-gradient(at 50% 100%, rgba(15, 30, 36, 0.9) 0px, transparent 60%), var(--ink-950); --gradient-primary: linear-gradient(155deg, var(--river-400), var(--river-500) 60%, #1e3a8a); --gradient-card: linear-gradient(155deg, rgba(var(--river-300-rgb), 0.10), rgba(20, 42, 49, 0.02)); --gradient-text: linear-gradient(120deg, var(--mist-100), var(--river-300)); }