/* ============================================================================= DESIGN TOKENS — the single source of truth for the visual language. Pure CSS custom properties, OKLCH color. No build step. No Sass. THEME: "Dusk" (2026-06) — warm parchment surfaces, plum-charcoal ink, dusty-plum accent. Extracted from the Dusk mockups; the mapping from the previous (cool teal) theme lives in docs/DESIGN-REFACTOR-MAP.md. Color system follows the 37signals (Campfire/Writebook/Fizzy) pattern: raw OKLCH primitives → semantic tokens → components. Dark mode just nudges a few primitives; every derived color updates automatically, because custom properties resolve live at use-time. Rules (see .claude/skills/front-end-css/SKILL.md): - Components reference SEMANTIC tokens only (--color-text, --surface, --accent…). - Color is reserved for STATUS and MEANING. Chrome stays calm/neutral. - Spacing is content-relative: --inline-space (ch) horizontally, --block-space (rem) vertically. This is the FIRST file in the cascade, so it also declares the global @layer order. ========================================================================== */ @layer reset, tokens, base, layout, components, utilities; @layer tokens { :root { /* ---- Raw OKLCH primitives: Lightness Chroma Hue ------------------- */ --lch-brand: 50% 0.065 338; /* dusty plum — the care/heart accent (#7C5570) */ --lch-blue: 52% 0.084 232; /* info — muted teal-blue (#2D7191) */ --lch-green: 49% 0.060 161; /* positive / done — sage green (#3F6A54) */ --lch-amber: 70% 0.105 66; /* warning / due — warm amber (#CC9358) */ --lch-red: 55% 0.180 30; /* negative / missed — warm red */ /* Per-person identity hues (avatars). Decorative-adjacent but meaningful: "who" is information. Always paired with initials/name. */ --lch-person-1: 52% 0.084 232; /* teal-blue (#2D7191) */ --lch-person-2: 62% 0.112 46; /* rust (#BD6F49) */ --lch-person-3: 49% 0.060 161; /* sage (#3F6A54) */ --lch-person-4: 41% 0.055 338; /* deep plum (#5D3E54) */ --lch-person-5: 60% 0.088 83; /* gold (#9A7B3E) */ /* Neutral chrome: TWO warm hues — parchment for surfaces/borders, plum-charcoal for ink. Dark mode swaps them (plum-dark surfaces, parchment ink); only these primitives change, never components. */ --neutral-hue: 58; /* warm parchment (surfaces, borders) */ --ink-hue: 344; /* warm plum-charcoal (text) */ /* Neutral lightness/chroma ramp (LIGHT theme) — flipped in dark mode. NOTE the Dusk stack: canvas is the DEEPER cream (#F6F0EC); cards are the warm off-white (#FFFAF6). Pure white is not used as a surface. */ --l-canvas: 95.9%; --c-canvas: 0.008; /* sunken background (#F6F0EC) */ --l-surface: 98.8%; --c-surface: 0.008; /* default surface (#FFFAF6) */ --l-raised: 98.8%; --c-raised: 0.008; /* cards — elevation comes from the plum shadow */ --l-text: 26%; --c-text: 0.016; /* ink (#2A2126) */ --l-text-muted: 47%; --c-text-muted: 0.022; /* ≈#5D4F57; kept darker than the mockup's #988A91 for WCAG AA */ --l-border: 91%; --c-border: 0.018; /* warm hairline (#ECDFD7) */ --l-border-strong: 84%; --c-border-strong: 0.024; --l-on-accent: 99%; /* text on the accent fill */ /* ---- Semantic color tokens (components use ONLY these) ------------ */ --surface: oklch(var(--l-surface) var(--c-surface) var(--neutral-hue)); --surface-raised: oklch(var(--l-raised) var(--c-raised) var(--neutral-hue)); --surface-sunken: oklch(var(--l-canvas) var(--c-canvas) var(--neutral-hue)); --color-text: oklch(var(--l-text) var(--c-text) var(--ink-hue)); --color-text-muted: oklch(var(--l-text-muted) var(--c-text-muted) var(--ink-hue)); --color-border: oklch(var(--l-border) var(--c-border) var(--neutral-hue)); --color-border-strong: oklch(var(--l-border-strong) var(--c-border-strong) var(--neutral-hue)); --accent: oklch(var(--lch-brand)); --accent-hover: color-mix(in oklab, oklch(var(--lch-brand)) 88%, black); --accent-contrast: oklch(var(--l-on-accent) var(--c-canvas) var(--neutral-hue)); /* Quiet plum-tinted surface for selected/active/hover-on-accent rows (the mockups' #EEE2EC). Use instead of ad-hoc accent mixes. */ --accent-tint: color-mix(in oklab, var(--accent) 11%, var(--surface)); --danger: oklch(var(--lch-red)); --danger-contrast: oklch(99% var(--c-canvas) var(--neutral-hue)); --focus-ring: 0 0 0 3px oklch(var(--lch-brand) / 0.45); /* Person identity fills (avatars): solid hue + light initials. */ --person-1: oklch(var(--lch-person-1)); --person-2: oklch(var(--lch-person-2)); --person-3: oklch(var(--lch-person-3)); --person-4: oklch(var(--lch-person-4)); --person-5: oklch(var(--lch-person-5)); --person-contrast: oklch(99% 0.005 var(--neutral-hue)); /* Status pairs — each derived from ONE hue via color-mix. Auto-adapts to dark because --surface/--color-text (and the hues) flip there. */ --status-info-bg: color-mix(in oklab, oklch(var(--lch-blue)) 12%, var(--surface)); --status-info-fg: color-mix(in oklab, oklch(var(--lch-blue)) 74%, var(--color-text)); --status-success-bg: color-mix(in oklab, oklch(var(--lch-green)) 14%, var(--surface)); --status-success-fg: color-mix(in oklab, oklch(var(--lch-green)) 70%, var(--color-text)); --status-warning-bg: color-mix(in oklab, oklch(var(--lch-amber)) 18%, var(--surface)); --status-warning-fg: color-mix(in oklab, oklch(var(--lch-amber)) 72%, var(--color-text)); --status-danger-bg: color-mix(in oklab, oklch(var(--lch-red)) 12%, var(--surface)); --status-danger-fg: color-mix(in oklab, oklch(var(--lch-red)) 74%, var(--color-text)); /* ---- Spacing: content-relative ------------------------------------ */ --inline-space: 1ch; /* horizontal: one character width */ --block-space: 1rem; /* vertical: one root em */ --space-3xs: 0.125rem; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --page-block-gap: calc(var(--space-md) + var(--space-2xs)); /* ~20px at default scale */ /* ---- Type (--font-scale powers the accessibility text-size control) Dusk pairing: Hanken Grotesk for UI/body, Bricolage Grotesque for display headings (loaded from Google Fonts in layouts/_head). */ --font-scale: 1; --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji"; --font-display: "Bricolage Grotesque", var(--font-sans); --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: calc(0.75rem * var(--font-scale)); --text-sm: calc(0.875rem * var(--font-scale)); --text-base: calc(1rem * var(--font-scale)); --text-lg: calc(1.125rem * var(--font-scale)); --text-xl: calc(1.3125rem * var(--font-scale)); /* 21px — card titles */ --text-2xl: calc(1.5rem * var(--font-scale)); /* 24px — screen titles */ --text-3xl: calc(1.875rem * var(--font-scale)); /* 30px — page greeting */ --leading-tight: 1.2; --leading-normal: 1.5; --leading-loose: 1.7; --weight-normal: 400; --weight-medium: 600; /* Hanken's 500 is too light for labels/buttons */ --weight-semibold: 700; /* section/card headings — as heavy as bold at this weight range */ --weight-bold: 700; --tracking-caps: 0.05em; /* uppercase section labels */ --tracking-display: -0.015em; /* large Bricolage headings sit tighter */ /* ---- Radii, borders, shadows -------------------------------------- */ --radius-sm: 0.5rem; /* 8px — small chips, focus halos */ --radius-md: 0.8125rem; /* 13px — buttons, inputs, rows */ --radius-lg: 1.0625rem; /* 17px — cards */ --radius-xl: 1.5rem; /* 24px — sheets, hero surfaces */ --radius-pill: 999px; --border-width: 1px; /* Soft, plum-tinted elevation (the Dusk "glow"); derived from brand. */ --shadow-sm: 0 1px 2px oklch(var(--lch-brand) / 0.06), 0 4px 12px oklch(var(--lch-brand) / 0.05); --shadow-md: 0 1px 2px oklch(var(--lch-brand) / 0.05), 0 8px 22px oklch(var(--lch-brand) / 0.07); --shadow-lg: 0 12px 32px oklch(0% 0 0 / 0.14), 0 0 0 1px oklch(0% 0 0 / 0.04); /* ---- Motion (reduced-motion handled in reset) --------------------- */ --ease: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 120ms; --dur-base: 200ms; /* ---- Layout sizing (content-relative; breakpoints think in ch) ---- */ --measure: 65ch; /* readable line length */ --container-max: 72rem; --container-pad: var(--space-md); --touch-target: 44px; /* min tap size — caregivers on phones */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --bp-lap: 48rem; /* posture breakpoint (media queries hardcode 48rem) */ --bottom-nav-h: 3.5rem; --z-header: 100; --z-overlay: 1000; --z-toast: 1100; /* ---- Form controls: select caret (styled in base/base.css) -------- */ --select-caret-size: 1rem; --select-caret-inset: var(--space-sm); --select-caret-gap: var(--space-sm); --select-caret-pad-end: calc(var(--select-caret-inset) + var(--select-caret-size) + var(--select-caret-gap)); --select-caret-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D4F57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* ---- Accessibility: font-size increase (FEA-0005) ----------------- */ color-scheme: light dark; } /* An explicit choice pins native controls (checkboxes, date inputs) to the chosen scheme — otherwise the UA follows the OS preference. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ---- DARK theme: flip a handful of primitives; everything derived (surfaces, text, borders, status pairs) updates automatically. Dusk dark = plum-dark surfaces with parchment ink (the two neutral hues swap), and each saturated hue lifts for dark contrast. -------- */ :root[data-theme="dark"] { --neutral-hue: 344; /* surfaces go plum-dark */ --ink-hue: 58; /* ink goes warm parchment */ --l-canvas: 16%; --c-canvas: 0.012; --l-surface: 20%; --c-surface: 0.012; --l-raised: 23%; --c-raised: 0.012; --l-text: 95%; --c-text: 0.008; --l-text-muted: 72%; --c-text-muted: 0.012; --l-border: 32%; --c-border: 0.014; --l-border-strong: 42%; --c-border-strong: 0.016; --l-on-accent: 98%; --lch-brand: 72% 0.060 338; /* lighter plum for dark surfaces */ --lch-blue: 72% 0.090 232; --lch-green: 72% 0.080 161; --lch-amber: 80% 0.100 70; --lch-red: 70% 0.160 30; --accent-hover: color-mix(in oklab, oklch(var(--lch-brand)) 88%, white); --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.4); --shadow-md: 0 2px 10px oklch(0% 0 0 / 0.5); --shadow-lg: 0 10px 32px oklch(0% 0 0 / 0.6); --select-caret-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5ADB6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* System preference, when the user hasn't explicitly chosen a theme. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --neutral-hue: 344; --ink-hue: 58; --l-canvas: 16%; --c-canvas: 0.012; --l-surface: 20%; --c-surface: 0.012; --l-raised: 23%; --c-raised: 0.012; --l-text: 95%; --c-text: 0.008; --l-text-muted: 72%; --c-text-muted: 0.012; --l-border: 32%; --c-border: 0.014; --l-border-strong: 42%; --c-border-strong: 0.016; --l-on-accent: 98%; --lch-brand: 72% 0.060 338; --lch-blue: 72% 0.090 232; --lch-green: 72% 0.080 161; --lch-amber: 80% 0.100 70; --lch-red: 70% 0.160 30; --accent-hover: color-mix(in oklab, oklch(var(--lch-brand)) 88%, white); --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.4); --shadow-md: 0 2px 10px oklch(0% 0 0 / 0.5); --shadow-lg: 0 10px 32px oklch(0% 0 0 / 0.6); --select-caret-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5ADB6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } } /* Accessibility: font-size increase — the control sets data-font-size on . Discrete steps: 100% → 115% → 130% → 150% (FEA-0005). */ :root[data-font-size="large"] { --font-scale: 1.15; } :root[data-font-size="xlarge"] { --font-scale: 1.3; } :root[data-font-size="xxlarge"] { --font-scale: 1.5; } }