/* ═══════════════════════════════════════════════════════════════════ Design tokens — Stripe-grade dual-theme system. Light is the default. Dark mode activates via [data-theme="dark"] on (set by js/utils/theme-toggle.js, persisted for the session). Every variable NAME used across the app is preserved here so the whole product re-themes from this one file. Semantic surface/text/border/nav tokens are theme-aware (overridden in the [data-theme="dark"] block); brand, bands, spacing, radius, type and motion are theme-invariant. ─────────────────────────────────────────────────────────────────── */ :root { color-scheme: light; /* ─── Brand primary (Stripe purple) ─────────────────────────── */ --color-primary: #635bff; --color-primary-hover: #533afd; --color-primary-active: #4b3ff0; --color-primary-light: rgb(99 91 255 / 0.08); --color-primary-border: rgb(99 91 255 / 0.22); --color-primary-contrast: #ffffff; /* ─── Score bands (semantic — theme-invariant hues) ─────────── */ --color-band-at-risk: #dc2626; --color-band-stabilizing: #ea580c; --color-band-competitive: #ca8a04; --color-band-leading: #16a34a; --color-band-at-risk-bg: rgb(220 38 38 / 0.08); --color-band-stabilizing-bg: rgb(234 88 12 / 0.08); --color-band-competitive-bg: rgb(202 138 4 / 0.08); --color-band-leading-bg: rgb(22 163 74 / 0.08); --color-band-at-risk-border: rgb(220 38 38 / 0.25); --color-band-stabilizing-border: rgb(234 88 12 / 0.25); --color-band-competitive-border: rgb(202 138 4 / 0.25); --color-band-leading-border: rgb(22 163 74 / 0.25); /* ─── AI accent ────────────────────────────────────────────── */ --color-ai: #7a73ff; --color-ai-hover: #635bff; --color-ai-light: rgb(122 115 255 / 0.10); --color-ai-border: rgb(122 115 255 / 0.24); --color-ai-badge: #7a73ff; /* backwards compat alias */ /* ─── Neutrals (theme-aware — overridden for dark) ──────────── */ --color-text-primary: #0a2540; /* Stripe navy */ --color-text-secondary: #425466; --color-text-tertiary: #687385; --color-text-inverse: #ffffff; --color-surface: #ffffff; --color-surface-elevated: #f6f9fc; /* Stripe page wash */ --color-surface-subtle: #eef3f9; --color-surface-inset: #e3ecf7; --color-border: #e3ecf7; --color-border-strong: #c8d6e8; /* Aliases referenced across page CSS (previously undefined → fell back to hardcoded dark values, breaking theming). Defined here so they follow the active theme everywhere. */ --color-surface-raised: #ffffff; --color-text-muted: var(--color-text-secondary); --color-blur-overlay: rgb(10 37 64 / 0.55); /* Frosted scrim over blurred/locked content (theme-aware). */ --color-scrim: rgb(255 255 255 / 0.7); /* ─── Tooltip / popover surfaces ────────────────────────────── */ --color-tooltip-bg: #1e293b; --color-tooltip-text: #f6f9fc; /* ─── Nav (dark rail in both themes — Stripe navy) ──────────── */ --color-nav-bg: #0a2540; /* ─── Stripe-grade gradients (mesh / aurora) ────────────────── */ --gradient-brand: linear-gradient(135deg, #635bff 0%, #7a73ff 100%); --gradient-hero: linear-gradient(140deg, #0a2540 0%, #1a1052 48%, #0a2540 100%); /* Light aurora mesh — layered radial blooms on white/off-white */ --gradient-aurora: radial-gradient(40% 50% at 15% 20%, rgb(99 91 255 / 0.20) 0%, transparent 60%), radial-gradient(35% 45% at 85% 15%, rgb(99 91 255 / 0.14) 0%, transparent 55%), radial-gradient(45% 55% at 75% 85%, rgb(56 189 248 / 0.12) 0%, transparent 60%), radial-gradient(40% 50% at 25% 90%, rgb(122 115 255 / 0.10) 0%, transparent 55%); /* Dark aurora mesh — for the navy hero, richer than a flat linear */ --gradient-aurora-dark: radial-gradient(50% 55% at 72% 30%, rgb(99 91 255 / 0.32) 0%, transparent 60%), radial-gradient(45% 60% at 18% 65%, rgb(83 58 253 / 0.24) 0%, transparent 55%), radial-gradient(40% 45% at 88% 80%, rgb(56 189 248 / 0.14) 0%, transparent 55%); /* ─── Status ───────────────────────────────────────────────── */ --color-error: #dc2626; --color-error-bg: rgb(220 38 38 / 0.06); --color-error-border: rgb(220 38 38 / 0.2); --color-success: #16a34a; --color-success-bg: rgb(22 163 74 / 0.08); /* Semantic status tokens — theme-aware, used for chips/badges/banners. These flip in dark mode so you never need to hardcode status colours. */ --color-status-success-text: #15803d; --color-status-success-bg: rgba(22, 163, 74, 0.08); --color-status-success-border: rgba(22, 163, 74, 0.20); --color-status-warning-text: #c2410c; --color-status-warning-bg: rgba(234, 88, 12, 0.08); --color-status-warning-border: rgba(234, 88, 12, 0.20); --color-status-error-text: #b91c1c; --color-status-error-bg: rgba(220, 38, 38, 0.08); --color-status-error-border: rgba(220, 38, 38, 0.20); --color-status-info-text: #1d4ed8; --color-status-info-bg: rgba(59, 130, 246, 0.08); --color-status-info-border: rgba(59, 130, 246, 0.20); /* ─── Typography ─────────────────────────────────────────────── sohne-var is Stripe's typeface; fall back to Inter/system. */ --font-family: "Sohne", "sohne-var", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-family-mono: ui-monospace, "Cascadia Code", "SF Mono", monospace; --font-size-xs: 0.75rem; /* 12 px */ --font-size-sm: 0.875rem; /* 14 px */ --font-size-body: 1rem; /* 16 px */ --font-size-lg: 1.125rem; /* 18 px */ --font-size-xl: 1.25rem; /* 20 px */ --font-size-2xl: 1.5rem; /* 24 px */ --font-size-3xl: 1.875rem; /* 30 px */ --font-size-4xl: 2.25rem; /* 36 px */ --font-size-hero: clamp(2.5rem, 8vw, 4.5rem); /* Fluid display scale — interpolates smoothly 320px → 2560px. */ --font-size-display-1: clamp(2.5rem, 1.4rem + 5.0vw, 4.5rem); /* hero */ --font-size-display-2: clamp(2rem, 1.3rem + 3.0vw, 3.25rem); /* section H2 */ --font-size-display-3: clamp(1.625rem, 1.2rem + 1.9vw, 2.375rem); /* backwards compat aliases */ --font-size-caption: 0.875rem; --font-size-heading: 1.5rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --line-height-none: 1; --line-height-tight: 1.15; --line-height-snug: 1.3; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.08em; /* ─── Spacing (4 px grid) ──────────────────────────────────── */ --space-1: 0.25rem; /* 4 px */ --space-2: 0.5rem; /* 8 px */ --space-3: 0.75rem; /* 12 px */ --space-4: 1rem; /* 16 px */ --space-5: 1.25rem; /* 20 px */ --space-6: 1.5rem; /* 24 px */ --space-8: 2rem; /* 32 px */ --space-10: 2.5rem; /* 40 px */ --space-12: 3rem; /* 48 px */ --space-16: 4rem; /* 64 px */ /* ─── Border radius (Stripe scale) ─────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ─── Elevation / shadows (slate-blue-tinted) ──────────────── */ --shadow-xs: 0 1px 2px 0 rgb(50 50 93 / 0.08); --shadow-sm: 0 2px 5px -1px rgb(50 50 93 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.05); --shadow-md: 0 6px 12px -2px rgb(50 50 93 / 0.12), 0 3px 6px -3px rgb(0 0 0 / 0.06); --shadow-lg: 0 13px 27px -8px rgb(50 50 93 / 0.18), 0 8px 16px -10px rgb(0 0 0 / 0.07); --shadow-xl: 0 24px 48px -12px rgb(50 50 93 / 0.22), 0 12px 24px -12px rgb(0 0 0 / 0.09); --shadow-2xl: 0 40px 80px -16px rgb(50 50 93 / 0.30), 0 18px 36px -18px rgb(0 0 0 / 0.12); /* Color-tinted "floating" shadows for primary CTAs / accent cards */ --shadow-primary: 0 8px 24px -6px rgb(99 91 255 / 0.40); --shadow-primary-lg: 0 16px 40px -8px rgb(99 91 255 / 0.45); --shadow-ai: 0 8px 24px -6px rgb(122 115 255 / 0.40); --shadow-focus: 0 0 0 3px rgb(99 91 255 / 0.30); --shadow-focus-ai: 0 0 0 3px rgb(122 115 255 / 0.30); /* ─── Icon masks (Lucide-style) — use as CSS mask with currentColor ── */ --icon-lock: 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%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); --icon-warning: 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%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); --icon-bolt: 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%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E"); /* ─── Motion ───────────────────────────────────────────────── */ --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 650ms; --duration-gauge: 1200ms; --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-butter: cubic-bezier(0.25, 0.8, 0.25, 1); /* backwards compat aliases used by existing component CSS */ --transition-default: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-gauge: 1200ms cubic-bezier(0.4, 0, 0.2, 1); /* ─── Motion distances & micro-interaction scales ──────────── */ --motion-rise: 8px; /* entrance translateY */ --motion-rise-lg: 16px; /* hero / section entrance */ --motion-press: 0.97; /* active-state scale for buttons */ --motion-lift: -2px; /* hover translateY for cards/buttons */ --stagger-step: 60ms; /* delay increment for sequential reveals */ /* Smooth cross-fade when toggling themes */ --theme-transition: background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out); /* ─── Utility aliases (fix undefined-token fallbacks across codebase) ─ These map legacy/alternate names to canonical tokens so every file that references them resolves correctly without touching the callsite. */ /* Surface */ --color-text: var(--color-text-primary); --color-surface-hover: var(--color-surface-subtle); --color-surface-sunken: var(--color-surface-subtle); --color-primary-soft: var(--color-primary-light); /* Typography size aliases (billing.css naming convention) */ --text-xs: var(--font-size-xs); --text-sm: var(--font-size-sm); --text-base: var(--font-size-body); --text-lg: var(--font-size-lg); --text-xl: var(--font-size-xl); --text-2xl: var(--font-size-2xl); --text-3xl: var(--font-size-3xl); /* Typography weight aliases */ --font-bold: var(--font-weight-bold); --font-semibold: var(--font-weight-semibold); --font-medium: var(--font-weight-medium); /* Line-height aliases */ --leading-tight: var(--line-height-tight); --leading-snug: var(--line-height-snug); --leading-normal: var(--line-height-normal); --leading-relaxed: var(--line-height-relaxed); /* Duration aliases */ --duration-150: var(--duration-fast); /* Neutral-scale aliases → map to semantic tokens so pages that use Tailwind-style --color-neutral-* still honour the active theme. */ --color-neutral-900: var(--color-text-primary); --color-neutral-800: var(--color-text-primary); --color-neutral-700: var(--color-text-secondary); --color-neutral-600: var(--color-text-secondary); --color-neutral-500: var(--color-text-tertiary); --color-neutral-400: var(--color-text-tertiary); --color-neutral-200: var(--color-border); --color-neutral-100: var(--color-surface-subtle); /* Missing font-size-md alias */ --font-size-md: var(--font-size-body); /* ─── Additional undefined-token aliases ──────────────────────── Collected from component files that pre-date the canonical naming. */ --color-danger: var(--color-band-at-risk); /* taxonomy, account */ --color-error-subtle: var(--color-error-bg); /* account-menu */ --color-neutral-subtle: var(--color-surface-subtle); /* competency */ --color-surface-disabled: var(--color-surface-subtle); /* taxonomy */ --color-surface-alt: var(--color-surface-subtle); /* taxonomy */ --color-ai-bg: var(--color-ai-light); /* distribution-curve */ --color-neutral-300: var(--color-border-strong); /* account */ --color-accent: var(--color-primary); /* gated-utilities */ --color-accent-hover: var(--color-primary-hover); /* gated-utilities */ --color-primary-on-dark: var(--color-primary); /* section-nav dark rail */ --color-surface-secondary: var(--color-surface-elevated); /* consent page */ } /* ═══════════════════════════════════════════════════════════════════ DARK THEME — deep Stripe navy. Only semantic surface/text/border/ status-bg tokens flip; brand purple, bands and structure stay. ─────────────────────────────────────────────────────────────────── */ [data-theme="dark"] { color-scheme: dark; /* ─── Brand (lifted for contrast on dark surfaces) ───────────── */ --color-primary: #7a73ff; --color-primary-hover: #8e88ff; --color-primary-active: #635bff; --color-primary-light: rgb(122 115 255 / 0.14); --color-primary-border: rgb(122 115 255 / 0.30); --color-ai: #8e88ff; --color-ai-hover: #a0aaff; --color-ai-light: rgb(142 136 255 / 0.16); --color-ai-border: rgb(142 136 255 / 0.30); --color-ai-badge: #8e88ff; /* ─── Text ───────────────────────────────────────────────────── */ --color-text-primary: #edf0f4; --color-text-secondary: #8b96aa; --color-text-tertiary: #5a6478; --color-text-inverse: #0f1117; /* ─── Carbon Black surfaces ──────────────────────────────────── */ /* Elevation scale: page < card < hover < inset < raised/modal Each step is ~6–8 lightness points apart, subtle blue-grey tint (GitHub Dark / Linear style — neutral-first, not vivid navy). */ --color-surface: #161b27; /* card / panel surface */ --color-surface-elevated: #0f1117; /* page background */ --color-surface-subtle: #1c2232; /* hover / muted area */ --color-surface-inset: #232a3b; /* input background */ --color-surface-raised: #202736; /* modal / dropdown */ /* ─── Borders ────────────────────────────────────────────────── */ --color-border: rgba(255 255 255 / 0.08); --color-border-strong: rgba(255 255 255 / 0.14); /* ─── Overlays ───────────────────────────────────────────────── */ --color-blur-overlay: rgb(0 0 0 / 0.60); --color-scrim: rgb(0 0 0 / 0.55); /* ─── Nav sidebar — deepest surface for clear separation ─────── */ --color-nav-bg: #0a0e18; /* ─── Tooltip / popover ──────────────────────────────────────── */ --color-tooltip-bg: #2a3045; --color-tooltip-text: #edf0f4; /* ─── Status (dark overrides — all verified ≥4.5:1 on #161b27) ─ */ --color-error-bg: rgba(220, 38, 38, 0.18); --color-success-bg: rgba(22, 163, 74, 0.18); --color-status-success-text: #4ade80; --color-status-success-bg: rgba(22, 163, 74, 0.18); --color-status-success-border: rgba(22, 163, 74, 0.30); --color-status-warning-text: #fb923c; --color-status-warning-bg: rgba(234, 88, 12, 0.18); --color-status-warning-border: rgba(234, 88, 12, 0.30); --color-status-error-text: #f87171; --color-status-error-bg: rgba(220, 38, 38, 0.18); --color-status-error-border: rgba(220, 38, 38, 0.30); --color-status-info-text: #93c5fd; --color-status-info-bg: rgba(59, 130, 246, 0.18); --color-status-info-border: rgba(59, 130, 246, 0.30); /* ─── Band tints (stronger on dark for readability) ─────────── */ --color-band-at-risk-bg: rgba(220, 38, 38, 0.18); --color-band-stabilizing-bg: rgba(234, 88, 12, 0.18); --color-band-competitive-bg: rgba(202, 138, 4, 0.18); --color-band-leading-bg: rgba(22, 163, 74, 0.18); /* ─── Shadows (pure black — tints invisible on carbon) ──────── */ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.40); --shadow-sm: 0 2px 5px -1px rgb(0 0 0 / 0.48), 0 1px 2px -1px rgb(0 0 0 / 0.36); --shadow-md: 0 6px 12px -2px rgb(0 0 0 / 0.52), 0 3px 6px -3px rgb(0 0 0 / 0.38); --shadow-lg: 0 13px 27px -8px rgb(0 0 0 / 0.58), 0 8px 16px -10px rgb(0 0 0 / 0.42); --shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.64), 0 12px 24px -12px rgb(0 0 0 / 0.46); --shadow-2xl: 0 40px 80px -16px rgb(0 0 0 / 0.70), 0 18px 36px -18px rgb(0 0 0 / 0.52); --gradient-aurora: var(--gradient-aurora-dark); } /* Honour OS preference on first paint when no explicit choice is stored. theme-toggle.js sets data-theme ASAP; this is the no-JS / pre-JS fallback. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --color-primary: #7a73ff; --color-primary-hover: #8e88ff; --color-text-primary: #edf0f4; --color-text-secondary: #8b96aa; --color-text-tertiary: #5a6478; --color-text-inverse: #0f1117; --color-surface: #161b27; --color-surface-elevated: #0f1117; --color-surface-subtle: #1c2232; --color-surface-inset: #232a3b; --color-surface-raised: #202736; --color-border: rgba(255 255 255 / 0.08); --color-border-strong: rgba(255 255 255 / 0.14); --color-nav-bg: #0a0e18; --color-tooltip-bg: #2a3045; --color-tooltip-text: #edf0f4; } }