/* tokens.css — the design system. Components reference these vars; never hardcode hex. Neutrals + chart surface are the dataviz-validated set so the charts sit coherently in the app. Status colors are the emotional accent. See SPEC.md §8. */ :root { /* neutrals */ --bg: #f9f9f7; --surface: #fcfcfb; --surface-2: #f2f1ec; --ink: #0b0b0b; --ink-2: #52514e; --muted: #6d6b66; /* WCAG AA (>=4.5:1) on all light surfaces; used for all secondary text */ --hairline: #e1e0d9; --baseline: #c3c2b7; --border: rgba(11, 11, 11, 0.10); --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.10); --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.06), 0 24px 48px -20px rgba(0, 0, 0, 0.18); /* status — fixed, never themed by hue (steps chosen per surface) */ --good: #0ca30c; --good-ink: #006300; --warning: #fab219; --warning-ink: #8a5a00; --serious: #ec835a; --serious-ink: #b4451f; --critical: #d03b3b; --critical-ink: #b02525; /* soft status washes for pills / zone fills (light) */ --good-wash: rgba(12, 163, 12, 0.10); --warning-wash: rgba(250, 178, 25, 0.14); --serious-wash: rgba(236, 131, 90, 0.14); --critical-wash: rgba(208, 59, 59, 0.12); /* chart series (validated light) */ --series-avg: #2a78d6; --series-morning: #eb6834; --series-evening: #4a3aa7; /* the status-reactive accent — JS sets this on to the latest reading's status color */ --accent: var(--good); --accent-ink: var(--good-ink); --accent-wash: var(--good-wash); /* type */ --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: 2.5rem; --fs-3xl: 3.5rem; /* spacing (4px base) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; /* radii */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-full: 999px; /* motion */ --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --dur: 160ms; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bg: #0d0d0d; --surface: #1a1a19; --surface-2: #232322; --ink: #ffffff; --ink-2: #c3c2b7; --muted: #9d9b91; /* WCAG AA on all dark surfaces */ --hairline: #2c2c2a; --baseline: #383835; --border: rgba(255, 255, 255, 0.10); --shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 24px -12px rgba(0, 0, 0, 0.55); --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 48px -20px rgba(0, 0, 0, 0.7); --good-ink: #0ca30c; --warning-ink: #fab219; --serious-ink: #f0a184; --critical-ink: #e46a6a; --good-wash: rgba(12, 163, 12, 0.18); --warning-wash: rgba(250, 178, 25, 0.20); --serious-wash: rgba(236, 131, 90, 0.20); --critical-wash: rgba(208, 59, 59, 0.22); --series-avg: #3987e5; --series-morning: #d95926; --series-evening: #9085e9; --accent-ink: var(--good-ink); color-scheme: dark; } } /* explicit manual dark (toggle) — mirrors the media block so it wins regardless of OS setting */ :root[data-theme='dark'] { --bg: #0d0d0d; --surface: #1a1a19; --surface-2: #232322; --ink: #ffffff; --ink-2: #c3c2b7; --muted: #9d9b91; /* WCAG AA on all dark surfaces */ --hairline: #2c2c2a; --baseline: #383835; --border: rgba(255, 255, 255, 0.10); --shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 24px -12px rgba(0, 0, 0, 0.55); --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 48px -20px rgba(0, 0, 0, 0.7); --good-ink: #0ca30c; --warning-ink: #fab219; --serious-ink: #f0a184; --critical-ink: #e46a6a; --good-wash: rgba(12, 163, 12, 0.18); --warning-wash: rgba(250, 178, 25, 0.20); --serious-wash: rgba(236, 131, 90, 0.20); --critical-wash: rgba(208, 59, 59, 0.22); --series-avg: #3987e5; --series-morning: #d95926; --series-evening: #9085e9; --accent-ink: var(--good-ink); color-scheme: dark; }