/* ======================================================================== vc-tokens.css — THE SINGLE SOURCE OF DESIGN TRUTH RetirePlusPlus Investor Module ($30M Series B) The ONLY place raw values live. Defines: 1. Raw palette scales (blue / green / violet / amber / slate / status) 2. Semantic role tokens — light authored as :root, dark as [data-theme="dark"] (runtime default, set pre-paint by theme-boot.js) 3. Gradients, type, spacing, radii, shadows, motion, layout. Exact hexes per design spec §1.2 / §1.3 (contrast pre-verified there). Consumed by vc-aliases.css, vc-base.css, vc-components.css, vc-utilities.css, vc-charts.css, vc-b2b2c.css, and all page CSS. Load order (every page ): theme-boot.js -> fonts -> vc-tokens.css -> vc-aliases.css -> vc-base.css -> vc-components.css -> vc-utilities.css -> vc-charts.css -> vc-b2b2c.css -> page CSS -> vc-print.css ======================================================================== */ /* ======================================================================== 1. RAW PALETTE SCALES (defined once, here, nowhere else) ======================================================================== */ :root { /* --- Brand: Blue (trust / finance) --- */ --blue-50: #EFF4FF; --blue-100: #DBE6FE; --blue-200: #BFD3FE; --blue-300: #93B4FD; --blue-400: #608EFA; --blue-500: #3B6BF5; --blue-600: #2552EB; --blue-700: #1E40AF; /* legacy primary */ --blue-800: #1B357F; --blue-900: #172A5C; --blue-950: #0E1A3A; /* --- Brand: Green (growth / health / HealthHaven) --- */ --green-50: #ECFDF5; --green-100: #D1FAE5; --green-200: #A7F3D0; --green-300: #6EE7B7; --green-400: #34D399; --green-500: #10B981; --green-600: #059669; /* legacy accent */ --green-700: #047857; --green-800: #065F46; --green-900: #064E3B; /* --- Brand: Violet (AI / NEXUS agents) --- */ --violet-50: #F5F3FF; --violet-100: #EDE9FE; --violet-300: #C4B5FD; --violet-400: #A78BFA; --violet-500: #8B5CF6; --violet-600: #7C3AED; --violet-700: #6D28D9; --violet-900: #4C1D95; /* --- Brand: Amber (partner / enterprise accent, used sparingly) --- */ --amber-400: #F59E0B; --amber-500: #D97706; --amber-600: #B45309; /* --- Neutral: Slate --- */ --slate-0: #FFFFFF; --slate-50: #F8FAFC; --slate-100: #F1F5F9; --slate-200: #E2E8F0; --slate-300: #CBD5E1; --slate-400: #94A3B8; --slate-500: #64748B; --slate-600: #475569; --slate-700: #334155; --slate-800: #1E293B; --slate-900: #0F172A; --slate-950: #070D1A; /* --- Status --- */ --status-success: #059669; --status-warning: #D97706; --status-error: #DC2626; --status-info: #0284C7; } /* ======================================================================== 2. TYPOGRAPHY TOKENS ======================================================================== */ :root { /* --- Families --- */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-data: 'Plus Jakarta Sans', 'Inter', sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace; /* --- Modular scale (1.20 body / 1.25 display; rem-based, 1rem = 16px) --- */ --fs-2xs: 0.6875rem; /* 11px — micro-labels, table sublabels */ --fs-xs: 0.75rem; /* 12px — eyebrow labels, captions, badges */ --fs-sm: 0.875rem; /* 14px — secondary UI, table cells */ --fs-base: 1rem; /* 16px — body (min for paragraphs) */ --fs-lg: 1.125rem; /* 18px — lead-in, large body */ --fs-xl: 1.25rem; /* 20px — sub-headings, lead */ --fs-2xl: 1.5rem; /* 24px — H4 */ --fs-3xl: 1.875rem; /* 30px — H3 */ --fs-4xl: 2.375rem; /* 38px — H2, metric values */ --fs-5xl: 3rem; /* 48px — H1 */ --fs-6xl: 3.75rem; /* 60px — hero / cover display */ --fs-7xl: 4.75rem; /* 76px — pitch-deck cover only */ /* --- Fluid hero heading (responsive without inline styles) --- */ --fs-hero: clamp(2.5rem, 6vw, 4.75rem); /* --- Weights --- */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* --- Line heights --- */ --lh-display: 1.12; --lh-heading: 1.25; --lh-body: 1.65; --lh-data: 1; /* --- Letter spacing --- */ --ls-display: -0.02em; --ls-heading: -0.01em; --ls-eyebrow: 0.12em; --ls-body: 0; } /* ======================================================================== 3. SPACING (8-pt grid) ======================================================================== */ :root { --space-0: 0; --space-0\.5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* Section vertical rhythm (responsive; overridden in media queries below) */ --section-y: var(--space-24); } /* ======================================================================== 4. RADII ======================================================================== */ :root { --radius-xs: 0.25rem; --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-pill: 9999rem; } /* ======================================================================== 5. MOTION ======================================================================== */ :root { --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 380ms; --ease-standard: cubic-bezier(.2, 0, 0, 1); --ease-emphasized: cubic-bezier(.2, 0, 0, 1.1); --lift: translateY(-0.25rem); } /* ======================================================================== 6. LAYOUT ======================================================================== */ :root { --max-width: 75rem; --max-width-prose: 46rem; --max-width-wide: 82rem; --header-height: 4rem; --slide-max: 60rem; --gutter: var(--space-6); } /* ======================================================================== 7. SEMANTIC ROLES — LIGHT (authored default; print / forced-light resolve here) ======================================================================== */ :root { /* --- Backgrounds --- */ --bg-canvas: var(--slate-50); /* page background */ --bg-surface: var(--slate-0); /* cards, tables */ --bg-surface-2: var(--slate-100); /* nested / striped rows */ --bg-inset: var(--slate-100); /* wells, code, locked overlays */ --bg-elevated: var(--slate-0); /* modals, popovers */ --bg-brand: var(--blue-700); /* hero / cover fills */ --bg-brand-deep: var(--blue-950); /* --- Text --- */ --text-primary: var(--slate-900); --text-secondary: var(--slate-600); --text-muted: #5B6678; /* slate-500/600 step — AA (>=4.5:1) on --bg-surface-2/--bg-inset (#F1F5F9), not just white */ --text-on-brand: #FFFFFF; --text-on-brand-dim: rgba(255, 255, 255, 0.72); /* --- Borders --- */ --border-subtle: var(--slate-200); --border-strong: var(--slate-300); --border-brand: var(--blue-700); /* --- Accents --- */ --accent-primary: var(--blue-700); /* primary actions, links-on-light */ --accent-primary-hover: var(--blue-600); --accent-secondary: var(--green-600); --accent-tertiary: var(--violet-600); --accent-partner: var(--amber-500); /* --- Status TEXT (theme-aware, AA-contrast) ----------------------------- The raw --status-* (§1) are saturated FILLS for borders/backgrounds/icons. When a status is rendered as TEXT (e.g. .metric-trend--up/--down, .vc-table .is-negative, .vc-form .form-error/.req, .vc-modal__status--*, .cell-yes), use these darker/lighter variants so normal text clears the WCAG 1.4.3 4.5:1 floor on the surfaces it lands on (saturated fills do not: e.g. --status-error #DC2626 ≈2.7:1 on dark --bg-surface). Light values are the 700-step on white (≈4.5:1+); dark values are the 400-step on slate-800. */ --status-success-text: #047857; /* green-700 — ≈4.5:1 on #FFFFFF */ --status-error-text: #B91C1C; /* red-700 — ≈5.9:1 on #FFFFFF */ --status-warning-text: #B45309; /* amber-700 — ≈4.8:1 on #FFFFFF */ --status-info-text: #0369A1; /* sky-700 — AA on #FFFFFF */ /* --- Focus + charts --- */ --focus-ring: 0 0 0 0.1875rem rgba(37, 82, 235, 0.45); /* AA-visible */ --chart-grid: var(--slate-200); --chart-label: var(--slate-500); --chart-title: var(--slate-900); } /* ======================================================================== 8. SEMANTIC ROLES — DARK (runtime default; set pre-paint by theme-boot.js) ======================================================================== */ [data-theme="dark"] { /* --- Backgrounds --- */ --bg-canvas: var(--slate-950); --bg-surface: var(--slate-800); --bg-surface-2: var(--slate-900); --bg-inset: #16213A; --bg-elevated: #1A2236; --bg-brand: var(--blue-800); --bg-brand-deep: var(--slate-950); /* --- Text --- */ --text-primary: #F1F5F9; --text-secondary: #CBD5E1; --text-muted: #94A3B8; --text-on-brand: #FFFFFF; --text-on-brand-dim: rgba(255, 255, 255, 0.70); /* --- Borders --- */ --border-subtle: #2A3A55; --border-strong: var(--slate-600); --border-brand: var(--blue-400); /* --- Accents (lightened for AA on dark surfaces) --- */ --accent-primary: var(--blue-400); --accent-primary-hover: var(--blue-300); --accent-secondary: var(--green-400); --accent-tertiary: var(--violet-400); --accent-partner: var(--amber-400); /* --- Status TEXT (lightened 400-step for AA on dark --bg-surface #1E293B) -- */ --status-success-text: var(--green-400); /* #34D399 — ≈7:1 on #1E293B */ --status-error-text: #F87171; /* red-400 — ≈5.4:1 on #1E293B */ --status-warning-text: var(--amber-400); /* #F59E0B — ≈6.6:1 on #1E293B */ --status-info-text: #38BDF8; /* sky-400 — AA on #1E293B */ /* --- Focus + charts --- */ --focus-ring: 0 0 0 0.1875rem rgba(96, 142, 250, 0.65); --chart-grid: rgba(148, 163, 184, 0.18); --chart-label: #94A3B8; --chart-title: #F1F5F9; } /* ======================================================================== 9. GRADIENTS (tokenized — replaces scattered grad-* / pd-funnel-* classes) Decorative only; never the sole carrier of meaning. Text on a gradient must meet AA against the gradient's LIGHTEST stop. ======================================================================== */ :root { --grad-hero: linear-gradient(155deg, var(--blue-950) 0%, var(--blue-800) 45%, var(--green-700) 100%); --grad-hero-dark: linear-gradient(155deg, #060B18 0%, var(--blue-900) 50%, var(--green-900) 100%); --grad-brand: linear-gradient(135deg, var(--blue-700), var(--blue-500)); --grad-growth: linear-gradient(135deg, var(--green-600), var(--green-400)); --grad-ai: linear-gradient(135deg, var(--violet-600), var(--blue-600)); /* NEXUS / AI layer */ --grad-partner: linear-gradient(135deg, var(--amber-500), var(--amber-400)); --grad-accent-line: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); --grad-glow-ai: radial-gradient(ellipse at 70% -10%, rgba(124, 58, 237, 0.16), transparent 60%); } /* On dark, swap the hero gradient to the deeper variant. */ [data-theme="dark"] { --grad-hero: var(--grad-hero-dark); } /* ======================================================================== 10. SHADOWS — LIGHT On dark (below), elevated surfaces ALSO get a hairline border:1px solid var(--border-subtle) because shadow alone is invisible on near-black surfaces. ======================================================================== */ :root { --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.10); --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12); --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.16); --shadow-brand: 0 12px 32px rgba(30, 64, 175, 0.18); } /* ======================================================================== 11. SHADOWS — DARK (deeper, lower-alpha) ======================================================================== */ [data-theme="dark"] { --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6); --shadow-xl: 0 28px 60px rgba(0, 0, 0, 0.65); --shadow-brand: 0 16px 40px rgba(0, 0, 0, 0.6); } /* ======================================================================== 12. RESPONSIVE SECTION RHYTHM Section vertical rhythm steps down on tablet / mobile. ======================================================================== */ @media (max-width: 64rem) { :root { --section-y: var(--space-16); } } @media (max-width: 48rem) { :root { --section-y: var(--space-12); --gutter: var(--space-4); } }