/* ========================================================================== Onward: design tokens Factored out of DESIGN.md. This file is the only place a raw value lives. Nothing in components.css or any screen may use a literal hex, radius, duration or spacing number. Ports to Next.js unchanged. ========================================================================== */ :root { /* ---- Primitives, carried from style guide v1 --------------------------- */ --blue-900: #0c3654; --blue-700: #124e78; --blue-400: #669bbc; --blue-050: #e8eff5; /* connected-chip fill */ --blue-025: #eef4f9; /* selected-choice fill */ --yellow-500: #f2bb05; /* progress / wayfinding ONLY */ --yellow-100: #fdf6dd; /* active attention filter */ --yellow-050: #fdf7e3; /* "needs you" row wash */ --orange-600: #d74e09; /* NARROWED: destructive confirmation accent only */ --green-700: #2e7d32; --green-050: #e9f2ea; --green-900: #1e4620; --khaki: #efefe9; --beige: #f0f0c9; --grey-100: #f5f5f5; --grey-300: #e0e0e0; --grey-500: #9e9e9e; /* ---- v2 additions ------------------------------------------------------ */ --paper: #fafaf7; /* warm paper replaces white as default surface */ --paper-raised: #ffffff; /* cards sit on paper as white */ --terracotta-600:#b5654d; /* wellbeing. NEVER appears in case-file UI */ --terracotta-100:#f6ece8; --error-700: #b3261e; --error-050: #f9e9e8; --error-900: #7a1a15; /* Video-overlay scrims. Controls and subtitles sit on moving picture, so they need translucency rather than a surface colour. */ --scrim-fill: rgba(12,54,84,.55); --scrim-fill-hover: rgba(12,54,84,.80); --scrim-line: rgba(255,255,255,.35); --scrim-track: rgba(255,255,255,.18); --scrim-shadow: rgba(0,0,0,.85); /* ---- Semantic aliases (v1 convention preserved) ------------------------ */ --color-primary-main: var(--blue-700); --color-primary-dark: var(--blue-900); --color-secondary-main: var(--blue-400); --color-progress: var(--yellow-500); --color-wellbeing: var(--terracotta-600); --color-success-main: var(--green-700); --color-error-main: var(--error-700); --color-text-primary: rgba(0,0,0,.87); --color-text-secondary: rgba(0,0,0,.60); --color-text-disabled: rgba(0,0,0,.38); --color-text-on-dark: #ffffff; --color-text-on-dark-muted: #c7d8e6; --color-text-on-dark-quiet: #8fb2c9; --color-background-default: var(--paper); --color-background-paper: var(--paper-raised); --color-background-sunk: var(--khaki); --color-border-default: var(--grey-300); --color-border-strong: rgba(0,0,0,.24); --color-divider: rgba(0,0,0,.10); /* ---- Categorical chart palette ----------------------------------------- */ /* Fixed brand-derived set. Subcategories are tints of their parent hue. Never drift into arbitrary hues as slices multiply. No purple defaults. */ --chart-1: #124e78; /* blue */ --chart-2: #c99a0a; /* chart gold, yellow-500 darkened for contrast */ --chart-3: #2e7d32; /* green */ --chart-4: #669bbc; /* light blue */ --chart-5: #b5654d; /* terracotta */ --chart-6: #5f7480; /* slate */ --chart-7: #8a6f4d; /* warm brown */ /* ---- Type ------------------------------------------------------------- */ --font-heading: 'Merriweather', Georgia, serif; --font-body: 'Lexend', -apple-system, BlinkMacSystemFont, sans-serif; /* Figures are set in Lexend as of 2026-08-03 (Jason), replacing IBM Plex Mono. Note for anyone reading a ragged column later: Lexend ships no tabular figures, and `font-variant-numeric: tabular-nums` therefore does nothing here. Its 1 is about 18% narrower than its 0, so columns of currency no longer align on the digit. Measured, not assumed. */ --font-data: 'Lexend', -apple-system, BlinkMacSystemFont, sans-serif; /* h3 exists for one job: the A1 hero headline, which sits beside the sign-in card on a full-width canvas and reads weak at h4. Nothing else uses it. */ --text-h3: 50px; --text-h4: 34px; --text-h5: 22px; --text-h6: 20px; --text-body1: 16px; --text-body2: 14px; --text-subtitle2: 14px; --text-button-lg: 15px; --text-button-md: 14px; --text-label: 13px; --text-caption: 12px; --leading-tight: 1.25; --leading-snug: 1.4; --leading-body: 1.6; /* ---- Spacing. Base unit 4px. ------------------------------------------ */ --space-xxxs: 4px; --space-xxs: 8px; --space-xs: 16px; --space-s: 24px; --space-m: 32px; --space-l: 40px; /* ---- Radius ----------------------------------------------------------- */ --radius-sm: 4px; /* buttons, inputs */ --radius-md: 12px; /* cards */ --radius-pill: 9999px; /* chips */ /* ---- Icons as masks (tint with currentColor). ------------------------- */ --icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v4.7l3 1.8'/%3E%3C/svg%3E"); /* A real stroked tick, round-capped and round-jointed. Replaces the two rotated borders the state mark used to draw one with: at 2px that trick mitres its corner into a blob, leaves square-cut ends, and cannot be optically centred, because the visual centre of a tick is not the centre of the box it is rotated inside. The path is drawn to sit centred in its own viewBox, so `center` in the mask puts it right. */ --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5L9.75 17 4 11.25'/%3E%3C/svg%3E"); /* ---- Elevation. Material stack, shadow warmed to blue-tinted. ---------- */ --elevation-1: 0 2px 1px -1px rgba(12,54,84,.08), 0 1px 1px 0 rgba(12,54,84,.06), 0 1px 3px 0 rgba(12,54,84,.10); --elevation-2: 0 3px 1px -2px rgba(12,54,84,.08), 0 2px 2px 0 rgba(12,54,84,.06), 0 1px 5px 0 rgba(12,54,84,.10); --elevation-4: 0 2px 4px -1px rgba(12,54,84,.10), 0 4px 5px 0 rgba(12,54,84,.07), 0 1px 10px 0 rgba(12,54,84,.09); /* ---- Motion. Minimal-functional. -------------------------------------- */ --motion-fast: 150ms; --motion-base: 250ms; --ease-enter: cubic-bezier(0,0,.2,1); --ease-exit: cubic-bezier(.4,0,1,1); /* The one choreographed moment: section completion. Used nowhere else. */ --motion-milestone: 1200ms; --ease-milestone: cubic-bezier(.22,.8,.32,1); /* ---- Layout ----------------------------------------------------------- */ --layout-sidebar: 340px; --layout-main-max: 1080px; --layout-focus: 620px; /* single-column heavy moments */ --layout-wide: 760px; /* the wider single column: T4, T7, Settings */ } /* ========================================================================== Dark mode: v2 scope. Strategy only; not signed off. ========================================================================== */ html[data-mode="dark"] { --paper: #101d28; --paper-raised: #16283a; --color-primary-main: #7fb2d9; --color-primary-dark: #a8cbe4; --color-text-primary: rgba(255,255,255,.90); --color-text-secondary: rgba(255,255,255,.62); --color-text-disabled: rgba(255,255,255,.38); --color-background-default: var(--paper); --color-background-paper: var(--paper-raised); --color-background-sunk: #233850; --color-border-default: #2c445a; --color-border-strong: rgba(255,255,255,.32); --color-divider: rgba(255,255,255,.12); --blue-050: #1c3247; --blue-025: #1c3247; --yellow-050: #2e2a17; --yellow-100: #33301a; --green-050: #1b2f1d; --green-900: #bcd9be; --error-050: #3d1f1d; --error-900: #eec3c0; --khaki: #233850; --terracotta-100: #3a2a24; --color-progress: #e3b90f; }