/* ============================================================================ Baseline — Design Tokens "instrument at first light" ---------------------------------------------------------------------------- Single source of visual truth. See DESIGN.md for rationale. Every colour below is verified by tools/verify-contrast.mjs — 47 checks, 0 failures, all values inside sRGB gamut. Do not hand-edit a colour without re-running that script. node tools/verify-contrast.mjs THEMES :root / [data-theme="dark"] — member app. Graphite canvas, chroma 0. [data-theme="light"] — admin console + member light mode. THE ONE RULE THAT MATTERS Surfaces carry no mood — chroma is exactly 0. The brand colour and the typography carry it. No cream, no warm-tinted near-white, no "paper". ========================================================================== */ :root { color-scheme: dark; /* ── Neutral surfaces ─────────────────────────────────────────────────── */ --canvas: oklch(0.155 0 0); /* #0c0c0c */ --surface-1: oklch(0.205 0 0); /* #171717 cards, sheets */ --surface-2: oklch(0.245 0 0); /* #202020 raised, inputs */ --surface-3: oklch(0.290 0 0); /* #2b2b2b hover on raised */ --hairline: oklch(0.300 0 0); /* #2e2e2e decorative dividers */ --border: oklch(0.530 0 0); /* #787878 control edges — clears 3:1 */ /* ── Ink ──────────────────────────────────────────────────────────────── */ --ink: oklch(0.970 0 0); /* #f5f5f5 17.9:1 */ --ink-2: oklch(0.760 0 0); /* #b1b1b1 9.1:1 */ --ink-3: oklch(0.660 0 0); /* #929292 6.3:1 ← THE FLOOR. Nothing lighter on real text, ever, including placeholders. */ /* ── Brand · seed hue 113 (olive) ─────────────────────────────────────── */ /* --brand means "you did the thing" — streak, logged, synced, adherent. It NEVER describes a blood-pressure value. See the ramp note below. */ --brand: oklch(0.800 0.155 113); /* #bfc840 10.7:1 on canvas */ --brand-dim: oklch(0.560 0.100 113); /* #757a2e borders, dim states */ --brand-ink: oklch(0.450 0.098 113); /* #565a05 readable on white */ --on-brand: oklch(0.155 0 0); /* ink for text on a brand fill */ /* ── Clinical status ramp ───────────────────────────────────────────────── Blue → sand → amber → orange → red. Deliberately NO GREEN. A green→red ramp fails three ways at once: it is indistinguishable under protanopia/deuteranopia (~8% of men — precisely the demographic that gets hypertension), it collapses in greyscale, and it wastes green on "your BP is fine" instead of "you completed your check-in". Hue + chroma are shared identity across themes. LUMINANCE IS CALIBRATED PER SURFACE: a deep crimson that reads urgent on white disappears into a dark canvas. This ramp sits high so even crisis clears AA on graphite. Both themes are monotonic in relative luminance, so the scale survives greyscale print and monochrome displays. */ --st-normal: oklch(0.860 0.070 232); /* #a3daf7 12.9:1 */ --st-elevated: oklch(0.810 0.120 76); /* #e5b86a 10.6:1 */ --st-stage1: oklch(0.760 0.150 58); /* #f79643 8.8:1 */ --st-stage2: oklch(0.705 0.175 38); /* #f87247 7.0:1 */ --st-crisis: oklch(0.655 0.190 22); /* #ee5459 5.6:1 */ --on-status: oklch(0.155 0 0); /* ink for text on a status fill */ /* Low-alpha fills of the same hues, for chips and chart bands. */ --st-normal-bg: color-mix(in oklab, var(--st-normal) 14%, transparent); --st-elevated-bg: color-mix(in oklab, var(--st-elevated) 14%, transparent); --st-stage1-bg: color-mix(in oklab, var(--st-stage1) 14%, transparent); --st-stage2-bg: color-mix(in oklab, var(--st-stage2) 14%, transparent); --st-crisis-bg: color-mix(in oklab, var(--st-crisis) 16%, transparent); /* ── Semantic feedback (not clinical) ─────────────────────────────────── */ --ok: var(--brand); --warn: oklch(0.810 0.120 76); --danger: oklch(0.655 0.190 22); --info: oklch(0.860 0.070 232); /* ── Typography ───────────────────────────────────────────────────────── */ --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Azeret Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; /* Fixed rem scale, ratio ~1.2. Product UI is viewed at consistent DPI — fluid clamp() headings that shrink inside a sidebar look worse. */ --fs-display: 3.5rem; /* 56px hero BP readout, mono */ --fs-xxl: 2rem; /* 32px page titles */ --fs-xl: 1.5rem; /* 24px section headings */ --fs-lg: 1.1875rem; /* 19px card titles */ --fs-md: 1rem; /* 16px body — the mobile floor */ --fs-sm: 0.875rem; /* 14px secondary, table cells */ --fs-xs: 0.78125rem;/* 12.5px labels, captions */ --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.55; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* ── Space · 4px base ─────────────────────────────────────────────────── */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-7: 2rem; --sp-8: 2.5rem; --sp-9: 3rem; --sp-10: 4rem; --sp-11: 5rem; --sp-12: 6rem; /* ── Radius ───────────────────────────────────────────────────────────── */ --r-xs: 5px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; /* ── Elevation ────────────────────────────────────────────────────────── */ --sh-1: 0 1px 2px rgba(0,0,0,.40); --sh-2: 0 2px 6px rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.30); --sh-3: 0 4px 12px rgba(0,0,0,.40), 0 24px 60px rgba(0,0,0,.45); /* ── Motion ─────────────────────────────────────────────────────────────── Custom curves only. The built-in CSS easings are too weak to read as intentional. ease-in never appears — it delays the initial movement, the exact moment the user is watching. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --dur-press: 140ms; --dur-tip: 160ms; --dur-screen: 220ms; --dur-sheet: 280ms; /* ── Z-index · semantic, never an arbitrary 9999 ──────────────────────── */ --z-base: 0; --z-sticky: 100; --z-dropdown: 200; --z-overlay: 300; --z-sheet: 400; --z-toast: 500; --z-tooltip: 600; /* ── Layout ───────────────────────────────────────────────────────────── */ --sidebar-w: 256px; --topbar-h: 60px; --maxw: 1240px; --maxw-prose: 68ch; --phone-w: 390px; --phone-h: 844px; --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 5px var(--brand); } /* ========================================================================== LIGHT — admin console, and the member app's light-mode toggle. Content is pure white; the sidebar is the member app's canvas colour, so the two products visibly share DNA without pretending to be one surface. ========================================================================== */ [data-theme='light'] { color-scheme: light; --canvas: oklch(0.985 0 0); /* #fafafa */ --surface-1: oklch(1.000 0 0); /* #ffffff content sits on pure white */ --surface-2: oklch(0.960 0 0); /* #f2f2f2 */ --surface-3: oklch(0.930 0 0); /* #ebebeb */ --hairline: oklch(0.900 0 0); /* #dedede */ --border: oklch(0.665 0 0); /* #a0a0a0 clears 3:1 on white */ --ink: oklch(0.200 0 0); /* #161616 18.1:1 */ --ink-2: oklch(0.430 0 0); /* #505050 8.1:1 */ --ink-3: oklch(0.520 0 0); /* #696969 5.5:1 ← floor */ --brand: oklch(0.450 0.098 113); /* #565a05 7.3:1 on white */ --brand-dim: oklch(0.780 0.090 113); --brand-ink: oklch(0.450 0.098 113); --on-brand: oklch(1.000 0 0); /* Same hues, luminance dropped to sit against white. */ --st-normal: oklch(0.530 0.070 232); /* #3e738d 5.0:1 */ --st-elevated: oklch(0.498 0.099 76); /* #815a2a 5.8:1 */ --st-stage1: oklch(0.465 0.109 58); /* #854705 6.6:1 */ --st-stage2: oklch(0.432 0.138 38); /* #8c2a04 7.6:1 */ --st-crisis: oklch(0.398 0.157 22); /* #88061c 9.0:1 */ --on-status: oklch(1.000 0 0); --st-normal-bg: oklch(0.968 0.018 232); /* #e9f7ff */ --st-elevated-bg: oklch(0.968 0.022 76); /* #fcf3e3 */ --st-stage1-bg: oklch(0.968 0.019 58); /* #fff2e8 */ --st-stage2-bg: oklch(0.968 0.016 38); /* #fff1ed */ --st-crisis-bg: oklch(0.968 0.015 22); /* #fff1f0 */ --ok: oklch(0.450 0.098 113); --warn: oklch(0.498 0.099 76); --danger: oklch(0.398 0.157 22); --info: oklch(0.530 0.070 232); --sh-1: 0 1px 2px rgba(12,12,12,.06); --sh-2: 0 1px 3px rgba(12,12,12,.07), 0 8px 22px rgba(12,12,12,.06); --sh-3: 0 2px 8px rgba(12,12,12,.08), 0 20px 50px rgba(12,12,12,.10); --focus-ring: 0 0 0 2px var(--surface-1), 0 0 0 5px var(--brand); } /* The admin sidebar keeps the member app's graphite regardless of theme. */ [data-theme='light'] { --chrome: oklch(0.185 0 0); /* #131313 */ --chrome-ink: oklch(0.970 0 0); --chrome-ink-2:oklch(0.660 0 0); --chrome-line: oklch(0.290 0 0); --chrome-hover:oklch(0.245 0 0); --chrome-brand:oklch(0.800 0.155 113); /* 10.2:1 on chrome */ } :root { --chrome: oklch(0.185 0 0); --chrome-ink: oklch(0.970 0 0); --chrome-ink-2:oklch(0.660 0 0); --chrome-line: oklch(0.290 0 0); --chrome-hover:oklch(0.245 0 0); --chrome-brand:oklch(0.800 0.155 113); }