/* ═══════════════════════════════════════════════════════════════════════════ tokens.css — VSHR design system semantic tokens Foundation Rebuild WS-4 (partial), 2026-04-17. Scope of this commit: 1. Define semantic color tokens (OKLCH + hex fallback) that abstract the existing site.css raw hexes (--blue, --orange, --navy, etc). 2. Define fluid type scale with clamp() for responsive headings. 3. Define breakpoint tokens as static custom properties (documentation — CSS can't consume them in @media queries, but JS/design-lint tools can). 4. Define elevation / shadow tokens named by INTENT, not by size. 5. Load order: FIRST in the stack (before site.css, before anything). NOT in scope (deferred): - Deletion of site.css, premium.css, vshr-v4.css — needs a separate grep-and-fold pass per class. - Migration of existing components from raw hex to these tokens — each component needs review. Happens in WS-3 completion work. Component authors going forward: prefer the semantic tokens below over raw values. Old tokens (--blue, --navy) remain defined in site.css for backwards compatibility. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ──── BRAND COLORS ──────────────────────────────────────────────────── */ /* Navy — primary brand color. Used for dark surfaces and text on light. */ --brand-primary: #07192E; /* navy */ --brand-primary-rgb: 7, 25, 46; --brand-primary-dim: #0D2B45; /* navy-2, elevated dark surfaces */ --brand-primary-deep: #04101F; /* footer depth */ /* Orange — accent, CTAs. */ --brand-accent: #F97316; /* orange-bright — was #C2410C burnt, banned per buttons rule */ --brand-accent-rgb: 194, 65, 12; --brand-accent-bright: #F97316; /* orange-bright for highlights */ --brand-accent-deep: #9A330A; /* Cyan — secondary accent. */ --brand-secondary: #1479A3; /* blue */ --brand-secondary-rgb: 20, 121, 163; --brand-secondary-bright: #29ABE2; /* ──── SEMANTIC / STATE COLORS ───────────────────────────────────────── */ --color-success: #15803D; /* green */ --color-success-bg: rgba(21, 128, 61, 0.08); --color-danger: #E92F30; /* brand-red — destructive, audit risk */ --color-danger-bg: rgba(233, 47, 48, 0.08); --color-warning: #F07128; --color-warning-bg: rgba(240, 113, 40, 0.08); --color-info: #1479A3; --color-info-bg: rgba(20, 121, 163, 0.08); /* ──── SURFACES (semantic layering) ──────────────────────────────────── */ --surface-canvas: #FFFFFF; /* page background light */ --surface-canvas-dark: var(--brand-primary); /* page background dark */ --surface-subtle: #F4F8FC; /* off-white, muted section */ --surface-card: #FFFFFF; /* card / panel */ --surface-elevated: rgba(255, 255, 255, 0.98); /* floating modal/dropdown */ --surface-inverse: #0D1829; /* inverted card on light bg */ /* ──── TEXT ─────────────────────────────────────────────────────────── */ --text-primary: #0D1829; /* main text on light bg */ --text-primary-soft: #2B3A4F; /* dossier/voice quote — between primary and secondary */ --text-secondary: #3D5266; /* muted */ --text-tertiary: #5B6B7E; /* deeper muted */ --text-quaternary: #8A97A8; /* deepest muted — small caps labels */ --text-on-dark: rgba(255, 255, 255, 0.92); --text-on-dark-dim: rgba(255, 255, 255, 0.72); --text-on-accent: #FFFFFF; /* ──── BORDERS ──────────────────────────────────────────────────────── */ --border-default: rgba(13, 24, 41, 0.12); --border-subtle: rgba(13, 24, 41, 0.06); --border-strong: rgba(13, 24, 41, 0.22); --border-on-dark: rgba(255, 255, 255, 0.14); --border-on-dark-subtle: rgba(255, 255, 255, 0.06); /* ──── CARD ACCENT (component-scoped tokens) ─────────────────────────── */ /* Pain cards, audience cards, etc — one unified neutral accent. Individual card variants can override via data-tone. */ --card-accent: var(--text-secondary); /* muted slate */ --card-accent-rgb: 61, 82, 102; /* ──── TYPE SCALE (fluid via clamp) ──────────────────────────────────── */ --fs-xs: clamp(11px, 0.72vw + 9px, 13px); --fs-sm: clamp(13px, 0.9vw + 11px, 15px); --fs-base: clamp(15px, 1vw + 13px, 17px); --fs-md: clamp(17px, 1.2vw + 14px, 21px); --fs-lg: clamp(20px, 1.6vw + 16px, 26px); --fs-xl: clamp(24px, 2.2vw + 18px, 33px); --fs-2xl: clamp(28px, 3vw + 22px, 41px); --fs-3xl: clamp(32px, 4vw + 24px, 52px); --fs-hero: clamp(36px, 5.5vw + 24px, 72px); /* ──── LINE HEIGHTS ─────────────────────────────────────────────────── */ /* NOTE: premium.css scopes a tighter override --lh-tight: 1.08 to `body.premium` for the 5 premium service pages' hero typography. That override is intentional (tighter leading on display headlines). Audit 2026-05-05: no consumer currently reads var(--lh-tight) anywhere in the codebase — these definitions are reserved for future component adoption. Don't sweep without a real consumer first. */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; --lh-loose: 1.75; /* ──── FONT FAMILIES ────────────────────────────────────────────────── */ --font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ──── SPACING SCALE (4pt base) ──────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ──── RADII ────────────────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 10px; /* golden card canonical */ --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px; /* ──── ELEVATION (semantic shadows by intent) ────────────────────────── */ --elevation-flat: 0 0 0 rgba(0, 0, 0, 0); --elevation-subtle: 0 1px 2px rgba(7, 25, 46, 0.06), 0 1px 3px rgba(7, 25, 46, 0.04); --elevation-card: 0 1px 2px rgba(7, 25, 46, 0.04), 0 8px 24px -12px rgba(7, 25, 46, 0.18), 0 16px 40px -20px rgba(7, 25, 46, 0.12); --elevation-raised: 0 1px 2px rgba(7, 25, 46, 0.05), 0 14px 32px -14px rgba(7, 25, 46, 0.18), 0 18px 36px -18px rgba(7, 25, 46, 0.14); --elevation-overlay: 0 20px 40px -16px rgba(0, 0, 0, 0.45), 0 28px 60px -24px rgba(0, 0, 0, 0.35); /* ──── BREAKPOINT TOKENS (informational — used by JS + design lint) ──── */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1440px; /* ──── CONTAINER WIDTHS ─────────────────────────────────────────────── */ --container-narrow: 820px; --container: 1200px; --container-wide: 1440px; } /* ═══════════════════════════════════════════════════════════════════════════ OKLCH PALETTE — modern color space with better perceptual uniformity. Defined inside @supports so older browsers keep the hex fallbacks above. Mix with color-mix(in oklch, ...) for accurate tint/shade without muddy. ═══════════════════════════════════════════════════════════════════════════ */ @supports (color: oklch(0% 0 0)) { :root { --brand-primary: oklch(19% 0.04 250); /* deep navy */ --brand-accent: oklch(56% 0.18 38); /* brand orange */ --brand-secondary: oklch(58% 0.11 235); /* brand blue */ --color-success: oklch(54% 0.14 150); --color-danger: oklch(62% 0.22 25); --color-warning: oklch(68% 0.17 55); --color-info: oklch(58% 0.11 235); } } /* ═══════════════════════════════════════════════════════════════════════════ DARK MODE TOKEN OVERRIDES — scoped to html.dark or prefers-color-scheme. Currently VSHR is light-only. These tokens are the door to dark mode when product decides to ship it. ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --surface-canvas: #07192E; --surface-subtle: #0D2B45; --surface-card: #0F2541; --text-primary: rgba(255, 255, 255, 0.92); --text-secondary: rgba(255, 255, 255, 0.72); --text-tertiary: rgba(255, 255, 255, 0.56); --border-default: rgba(255, 255, 255, 0.14); --border-subtle: rgba(255, 255, 255, 0.06); } } html[data-theme="dark"] { --surface-canvas: #07192E; --surface-subtle: #0D2B45; --surface-card: #0F2541; --text-primary: rgba(255, 255, 255, 0.92); --text-secondary: rgba(255, 255, 255, 0.72); --text-tertiary: rgba(255, 255, 255, 0.56); --border-default: rgba(255, 255, 255, 0.14); --border-subtle: rgba(255, 255, 255, 0.06); }