/* * tokens.css — v5.1.0 Figma-aligned design tokens. * Single source of truth, imported by index.html + every satellite page. * * v5.1.0 (Phase A — Figma reference adoption): * - 7-stop primary scale (cyan; #E6F7FD → #007AA6) * - 8-stop neutral scale (#FFFFFF → #1A1A1A) * - 3 semantic colors + light pairs (success/warning/error; --info dropped, cyan covers it) * - Functional UI tokens (--divider, --disabled-bg, --disabled-text, --button-bg, --link-hover) * - Font swap: --font-display = 'Be Vietnam Pro' (was Space Grotesk); --font-body unchanged * - Heading scale --font-h1..h6 with --tracking-tight: -0.02em * - Spacing scale revised: drops 20/56, adds 96/120 (12 stops total) * - Indigo retained as legacy alias (logo lockup only, see §LEGACY) * * Booking namespace boundary: * css/booking.css defines a parallel namespace (--c-primary / --r-card / --shadow-card / * --font-display) for the white-label booking runtime. Per-client overrides happen via those * tokens. Booking namespace defaults map to the values below; any token change here that should * also flow to booking must be mirrored there. * See design-system/whitecoat-hub/MASTER.md §"Booking namespace boundary". * * Phase C6 recolor gate: * Hub chrome migrates from indigo to neutral-900 + primary-500. Gated behind * body[data-recolor="v5.1"] (see §HUB CHROME). Default = legacy indigo. Toggle the attribute * on/off for instant rollback without code change. */ :root { /* ── PRIMARY (cyan, 7 stops) ─────────────────────────────────── */ --primary-100: #E6F7FD; /* section backgrounds */ --primary-200: #A6E6FA; /* cards, UI blocks */ --primary-300: #66D4F5; /* soft backgrounds */ --primary-400: #33C1F1; /* highlights, lighter UI */ --primary-500: #00ADEE; /* main brand color */ --primary-600: #008FC4; /* secondary emphasis */ --primary-700: #007AA6; /* hover states, pressed */ /* ── NEUTRALS (8 stops) ──────────────────────────────────────── */ --neutral-0: #FFFFFF; /* page background */ --neutral-50: #F7F7F7; /* page background alt */ --neutral-100: #F5F7F8; /* section background */ --neutral-200: #E5E5E5; /* input borders */ --neutral-300: #C7C7C7; /* borders, dividers */ --neutral-500: #808080; /* muted UI labels */ --neutral-700: #4D4D4D; /* secondary text */ --neutral-900: #1A1A1A; /* primary text */ /* ── SEMANTIC (success/warning/error + light pairs) ─────────── */ --success: #2BA24C; --success-light: #E7F6EC; --warning: #F5A623; --warning-light: #FFF3E0; --error: #D64545; --error-light: #FDEBEC; /* ── FUNCTIONAL UI ───────────────────────────────────────────── */ --divider: #E5E5E5; /* alias of --neutral-200 */ --disabled-bg: #F0F2F3; --disabled-text: #A8A8A8; --button-bg: #E1E7FA; /* soft button background */ --link-hover: #007AA6; /* alias of --primary-700 */ --success-emphasis: #008FC4; /* alias of --primary-600 — cyan-tinted success accent */ /* ── HUB CHROME (Phase C6 recolor gate) ──────────────────────── */ /* Default = legacy indigo. Opt-in `body[data-recolor="v5.1"]` swaps to neutral. */ --hub-chrome-fg: #13147C; /* legacy indigo for sidebar/headings */ --hub-chrome-fg-strong: #0E0F61; /* legacy indigo-dark */ --hub-chrome-bg: var(--neutral-50); /* ── SURFACES (semantic; forward-compat for dark mode) ───────── */ /* Mapped to LEGACY exact values to preserve zero visual diff after Phase A. * New code should reference --neutral-* directly or these surface tokens. */ --surface-1: #F8F9FC; /* page bg (legacy --off-white; close to --neutral-50 #F7F7F7) */ --surface-raised: #FFFFFF; /* cards, modals (= --neutral-0) */ --surface-strong: #FFFFFF; /* elevated dialogs (= --neutral-0) */ --surface-muted: #F3F3F3; /* chips, secondary fills (legacy --gray-bg; close to --neutral-100 #F5F7F8) */ /* ── TEXT (semantic, 3 levels — Figma v2.0) ──────────────────── */ /* New code should use these. Legacy --text/--text-body/--text-subtle preserved below. */ --text-primary: var(--neutral-900); /* main body — #1A1A1A (vs legacy --text #1F2937) */ --text-secondary: var(--neutral-700); /* secondary — #4D4D4D (vs legacy --text-body #595959) */ --text-muted: var(--neutral-500); /* muted/labels — #808080 (vs legacy --text-mid #6B7280) */ --text-on-brand: var(--neutral-0); --text-on-surface: var(--text-primary); /* ── TYPOGRAPHY: families ────────────────────────────────────── */ --font-display: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; /* ── TYPOGRAPHY: heading scale (v2.0) ────────────────────────── */ --font-h1: 40px; --font-h2: 36px; --font-h3: 32px; --font-h4: 28px; --font-h5: 24px; --font-h6: 20px; --line-h1: 48px; --line-h2: 44px; --line-h3: 40px; --line-h4: 32px; --line-h5: 32px; --line-h6: 24px; --tracking-tight: -0.02em; /* applied to all headings */ /* ── TYPOGRAPHY: body / caption / button / label ─────────────── */ --font-body-1: 16px; --font-body-2: 14px; --font-caption: 12px; --font-button-lg: 16px; --font-button-md: 14px; --font-subtitle: 16px; --font-label: 14px; --line-body-1: 24px; --line-body-2: 20px; --line-caption: 16px; /* ── TYPOGRAPHY: weights ─────────────────────────────────────── */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ── SPACING ────────────────────────────────────────────────── */ /* --space-1..12 preserve LEGACY values (4,8,12,16,20,24,32,40,48,56,64,80) so existing * CSS renders identically. The Figma v2.0 scale drops 20/56 and adds 96/120 — those * deltas live as named aliases below. New code SHOULD prefer named aliases or px values * over indexed --space-N to avoid coupling new layouts to legacy positions. */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; /* legacy stop — Figma v2.0 drops 20 */ --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 56px; /* legacy stop — Figma v2.0 drops 56 */ --space-11: 64px; --space-12: 80px; /* New additions from Figma v2.0 */ --space-96: 96px; --space-120: 120px; /* ── RADIUS ──────────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 9999px; /* ── SHADOW (4 elevations) ───────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.06); --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08); --shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.12); /* ── MOTION ──────────────────────────────────────────────────── */ --duration-fast: 0.12s; --duration-base: 0.2s; --duration-slow: 0.35s; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --ease-accelerate: cubic-bezier(0.4, 0, 1, 1); /* ── LAYOUT ──────────────────────────────────────────────────── */ --sidebar-w: 312px; --topbar-h: 64px; /* ── Z-INDEX ─────────────────────────────────────────────────── */ --z-sticky: 50; --z-sidebar: 100; --z-dropdown: 200; --z-modal: 500; --z-toast: 1000; /* ────────────────────────────────────────────────────────────── * LEGACY ALIASES — schedule for removal in v5.2 * Preserve old token names so existing CSS keeps compiling unchanged. * Every alias resolves to the same value as before, except where * deliberately migrated (text, indigo). Visual diff against * docs/token-test.html must be zero pixels after Phase A. * ──────────────────────────────────────────────────────────── */ /* Brand */ --indigo: #13147C; /* legacy: logo lockup only — do NOT use in new code */ --indigo-dark: #0E0F61; /* legacy */ --cyan: var(--primary-500); --cyan-text: #0090C4; /* AA-passing cyan for text on white (v2.7.1, kept exact for contrast) */ --brand: var(--indigo); /* Phase A default = legacy indigo. Phase C6 (data-recolor) overrides to --primary-500 (Path 2). */ /* Neutrals (legacy names → new scale) */ --white: var(--neutral-0); --off-white: #F8F9FC; /* legacy exact value (slightly violet vs new neutral-50 #F7F7F7) */ --gray-bg: #F3F3F3; /* legacy exact value */ --border: #EAECF0; /* legacy exact value (lighter than new --divider #E5E5E5) */ /* Text (legacy names → new semantic) */ --text: #1F2937; /* legacy exact slate value (NOT --neutral-900) */ --text-dark: #1B1C1D; /* legacy exact */ --text-body: #595959; /* legacy exact */ --text-subtle: #666666; /* legacy exact */ --text-mid: #6B7280; /* legacy exact (4.6:1 on white) */ --muted: #6B7280; /* legacy exact */ --text-on-surface-1: var(--text); /* Status (legacy names) */ --success-bg: #D1FAE5; /* legacy exact (lighter than new --success-light) */ --danger: #EF4444; /* legacy exact (vs new --error #D64545 — different value, kept) */ --danger-bg: #FEE2E2; /* legacy exact */ --warning-bg: #FEF3C7; /* legacy exact (vs new --warning-light) */ /* --info / --info-bg removed in v5.1 (Figma drops info; cyan covers it). * Migrate any external consumers to --primary-500 / --primary-100. */ /* Typography (legacy size names → new tokens or exact px) */ --font-size-xs: 11px; /* legacy exact (smaller than new --font-caption 12) */ --font-size-sm: 13px; /* legacy exact */ --font-size-base: 15px; /* legacy exact */ --font-size-md: 16px; /* matches --font-body-1 */ --font-size-lg: 18px; /* legacy exact (between --font-body-1 16 and --font-h6 20) */ --font-size-xl: 22px; /* legacy exact (between --font-h6 20 and --font-h5 24) */ --font-size-2xl: 28px; /* matches --font-h4 */ --font-size-3xl: 36px; /* matches --font-h2 */ --line-height-tight: 1.2; --line-height-base: 1.55; --line-height-relaxed: 1.7; /* Shadow (legacy --shadow-brand folded into --shadow-md per reference) */ --shadow-brand: 0 4px 24px rgba(19, 20, 124, 0.08); /* legacy exact (indigo-tinted) */ } /* ── PHASE C6 RECOLOR OPT-IN ─────────────────────────────────── */ /* Default body chrome uses indigo (above). Add this attribute to opt * a page into the v5.1 cyan-only chrome. Removing the attribute * instantly reverts. See plan §7.2 S4 + §7.5 R4. */ body[data-recolor="v5.1"] { --hub-chrome-fg: var(--neutral-900); --hub-chrome-fg-strong: var(--neutral-900); --hub-chrome-bg: var(--neutral-50); --brand: var(--primary-500); } /* a11y — visually hide but keep readable to assistive tech */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } /* a11y — global focus ring for keyboard users */ :focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; border-radius: 2px; } /* a11y — skip link (first focusable element on every page) */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--hub-chrome-fg); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; font: 500 14px/1 'Inter', sans-serif; text-decoration: none; z-index: var(--z-toast); } .skip-link:focus { left: 0; outline: 2px solid var(--primary-500); outline-offset: -2px; } /* a11y — respect user motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }