@pcoi/tokens 0.1.0

package/build/tokens.css

@@ -0,0 +1,473 @@
+/* ============================================
+   @pcoi/tokens — CSS Custom Properties
+   Generated 2026-03-03
+
+   Three-Tier Hierarchy:
+     Tier 1: Primitives (--pcoi-color-*, --pcoi-spacing-*, etc.)
+     Tier 2: Aliases     (referenced within semantics)
+     Tier 3: Semantics   (--pcoi-semantic-*, --pcoi-semantic-spacing-*, etc.)
+
+   RULE: Only apply semantic tokens to components.
+   ============================================ */
+
+:root {
+  /* ── Tier 1: Color Primitives ── */
+  --pcoi-color-bg: #0C0C14; /* Primary page background — deep navy-black */
+  --pcoi-color-bg-alt: #111120; /* Alternating section background — slightly lighter */
+  --pcoi-color-bg-card: #16162A; /* Card and panel background */
+  --pcoi-color-bg-card-hover: #1C1C38; /* Card background on hover state */
+  --pcoi-color-surface: #1A1A2E; /* Elevated surface — forms, callouts, input containers */
+  --pcoi-color-accent: #D4A44C; /* Brand gold — primary accent color */
+  --pcoi-color-accent-hover: #E0B560; /* Accent gold on hover — lighter/warmer */
+  --pcoi-color-text-primary: #E8E8F0; /* Primary text — off-white with slight blue tint */
+  --pcoi-color-text-secondary: #9595B0; /* Secondary text — muted lavender-grey */
+  --pcoi-color-text-muted: #8585A0; /* Muted text — placeholders, footnotes (WCAG AA compliant on surface) */
+  --pcoi-color-success: #3DA87A; /* Success/confirmation green — WCAG AA 4.5:1+ on dark backgrounds */
+  --pcoi-color-error: #E05252; /* Error/destructive red — validation errors, alerts */
+  --pcoi-color-warning: #E8943A; /* Warning amber — caution states, deprecation notices */
+  --pcoi-color-info: #5B8BD4; /* Informational blue — tips, help text, neutral alerts */
+  --pcoi-color-white: #FFFFFF; /* Pure white — used in alpha calculations */
+  --pcoi-color-black: #000000; /* Pure black — used in shadow calculations */
+  --pcoi-color-border: rgba(255, 255, 255, 0.35); /* Default border — white at 35% for WCAG AA 3:1 on dark backgrounds */
+  --pcoi-color-border-hover: rgba(255, 255, 255, 0.45); /* Hovered border — white at 45% for WCAG AA 3:1+ on dark backgrounds */
+  --pcoi-color-border-soft: rgba(255, 255, 255, 0.06); /* Soft decorative border — cards, panels (no WCAG contrast required) */
+  --pcoi-color-border-soft-hover: rgba(255, 255, 255, 0.12); /* Soft decorative border on hover — cards, panels */
+  --pcoi-color-accent-glow: rgba(212, 164, 76, 0.15); /* Accent glow for shadows and overlays */
+  --pcoi-color-accent-dim: rgba(212, 164, 76, 0.08); /* Accent-tinted background — badges, icon boxes, step numbers */
+  --pcoi-color-highlight: rgba(212, 164, 76, 0.06); /* Subtle accent highlight — comparison column bg */
+  --pcoi-color-nav-scrolled-bg: rgba(12, 12, 20, 0.92); /* Navigation background on scroll — semi-transparent dark */
+  --pcoi-color-ghost-hover-bg: rgba(255, 255, 255, 0.03); /* Ghost button hover background */
+  --pcoi-color-ghost-hover-border: rgba(255, 255, 255, 0.35); /* Ghost button hover border — WCAG AA 3:1 on dark backgrounds */
+  --pcoi-color-focus-border: rgba(212, 164, 76, 0.55); /* Input focus border — accent at 55% for WCAG AA 3:1+ visibility */
+  --pcoi-color-focus-glow: rgba(212, 164, 76, 0.08); /* Input focus outer ring glow */
+  --pcoi-color-accent-border-subtle: rgba(212, 164, 76, 0.58); /* Accent border — badges, principle hover — WCAG AA 3:1 */
+  --pcoi-color-accent-border-dim: rgba(212, 164, 76, 0.52); /* Accent border dim — step number circles — WCAG AA 3:1 */
+  --pcoi-color-grid-line: rgba(255, 255, 255, 0.02); /* Hero background grid lines */
+
+  /* ── Tier 1: Spacing Primitives ── */
+  --pcoi-spacing-0: 0px;
+  --pcoi-spacing-4: 4px;
+  --pcoi-spacing-5: 5px;
+  --pcoi-spacing-6: 6px;
+  --pcoi-spacing-8: 8px;
+  --pcoi-spacing-10: 10px;
+  --pcoi-spacing-12: 12px;
+  --pcoi-spacing-14: 14px;
+  --pcoi-spacing-16: 16px;
+  --pcoi-spacing-20: 20px;
+  --pcoi-spacing-22: 22px;
+  --pcoi-spacing-24: 24px;
+  --pcoi-spacing-28: 28px;
+  --pcoi-spacing-32: 32px;
+  --pcoi-spacing-36: 36px;
+  --pcoi-spacing-40: 40px;
+  --pcoi-spacing-48: 48px;
+  --pcoi-spacing-60: 60px;
+  --pcoi-spacing-64: 64px;
+  --pcoi-spacing-72: 72px;
+  --pcoi-spacing-80: 80px;
+  --pcoi-spacing-100: 100px;
+  --pcoi-spacing-120: 120px;
+
+  /* ── Tier 1: Radius Primitives ── */
+  --pcoi-radius-sm: 6px;
+  --pcoi-radius-md: 12px;
+  --pcoi-radius-lg: 20px;
+  --pcoi-radius-xl: 28px;
+  --pcoi-radius-full: 9999px;
+
+  /* ── Tier 1: Typography Primitives ── */
+  --pcoi-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --pcoi-font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
+  --pcoi-font-weight-light: 300;
+  --pcoi-font-weight-regular: 400;
+  --pcoi-font-weight-medium: 500;
+  --pcoi-font-weight-semibold: 600;
+  --pcoi-font-weight-bold: 700;
+  --pcoi-font-weight-extrabold: 800;
+  --pcoi-font-size-xs: 0.7rem;
+  --pcoi-font-size-sm: 0.75rem;
+  --pcoi-font-size-caption: 0.8rem;
+  --pcoi-font-size-body-sm: 0.85rem;
+  --pcoi-font-size-nav: 0.875rem;
+  --pcoi-font-size-body: 0.9rem;
+  --pcoi-font-size-body-default: 0.95rem;
+  --pcoi-font-size-body-lg: 1rem;
+  --pcoi-font-size-lead: 1.05rem;
+  --pcoi-font-size-sub: 1.1rem;
+  --pcoi-font-size-h3: 1.15rem;
+  --pcoi-font-size-h3-lg: 1.2rem;
+  --pcoi-font-size-logo: 1.35rem;
+  --pcoi-font-size-callout: 1.35rem;
+  --pcoi-font-size-close-sm: 1.25rem;
+  --pcoi-font-size-close-lg: 1.5rem;
+  --pcoi-font-size-h2-sm: 2.25rem;
+  --pcoi-font-size-h2: 2.5rem;
+  --pcoi-font-size-h1: 2.75rem;
+  --pcoi-font-size-display: 4rem;
+  --pcoi-font-lineHeight-none: 1;
+  --pcoi-font-lineHeight-tight: 1.1;
+  --pcoi-font-lineHeight-heading: 1.2;
+  --pcoi-font-lineHeight-snug: 1.3;
+  --pcoi-font-lineHeight-body-sm: 1.5;
+  --pcoi-font-lineHeight-body: 1.6;
+  --pcoi-font-lineHeight-step: 1.65;
+  --pcoi-font-lineHeight-relaxed: 1.7;
+  --pcoi-font-letterSpacing-tight: -0.03em;
+  --pcoi-font-letterSpacing-heading: -0.02em;
+  --pcoi-font-letterSpacing-normal: 0em;
+  --pcoi-font-letterSpacing-logo: 0.04em;
+  --pcoi-font-letterSpacing-label: 0.06em;
+  --pcoi-font-letterSpacing-badge: 0.08em;
+  --pcoi-font-letterSpacing-section: 0.1em;
+
+  /* ── Tier 1: Effects Primitives ── */
+  --pcoi-effect-shadow-btn-primary-hover: 0 8px 30px rgba(212, 164, 76, 0.25);
+  --pcoi-effect-shadow-nav-scrolled: 0 1px 0 rgba(255, 255, 255, 0.06);
+  --pcoi-effect-shadow-mobile-menu: 0 12px 40px rgba(0, 0, 0, 0.6);
+  --pcoi-effect-shadow-focus-ring: 0 0 0 3px rgba(212, 164, 76, 0.08);
+  --pcoi-effect-shadow-focus-ring-error: 0 0 0 3px rgba(224, 82, 82, 0.08);
+  --pcoi-effect-shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.4);
+  --pcoi-effect-blur-nav-backdrop: 20px;
+  --pcoi-effect-transition-fast: 0.2s ease;
+  --pcoi-effect-transition-medium: 0.3s ease;
+  --pcoi-effect-transition-slow: 0.6s ease;
+  --pcoi-effect-opacity-disabled: 0.5;
+  --pcoi-effect-transform-hover-lift: translateY(-2px);
+  --pcoi-effect-transform-hover-lift-sm: translateY(-1px);
+  --pcoi-effect-transform-fade-in-offset: translateY(24px);
+  --pcoi-effect-transform-parallax-factor: 0.15;
+  --pcoi-effect-transform-press-scale: scale(0.985);
+  --pcoi-effect-transform-press-scale-input: scale(0.99);
+  --pcoi-effect-transform-press-scale-control: scale(0.95);
+  --pcoi-effect-transform-press-scale-track: scale(0.975);
+  --pcoi-effect-transform-press-scale-icon: scale(0.925);
+  --pcoi-effect-transform-toggle-thumb-on: scale(1.15);
+
+  /* ── Tier 1: Layout Primitives ── */
+  --pcoi-layout-container-max: 1200px;
+  --pcoi-layout-container-narrow: 800px;
+  --pcoi-layout-container-cta: 680px;
+  --pcoi-layout-container-callout: 600px;
+  --pcoi-layout-container-chamath: 640px;
+  --pcoi-layout-container-hero-sub: 520px;
+  --pcoi-layout-container-compare: 900px;
+  --pcoi-layout-container-wide: 1100px;
+  --pcoi-layout-container-modal: 520px;
+  --pcoi-layout-container-toast-min: 280px;
+  --pcoi-layout-container-toast-max: 420px;
+  --pcoi-layout-container-compare-scroll: 500px;
+  --pcoi-layout-container-document: 900px;
+  --pcoi-layout-nav-height: 72px;
+  --pcoi-layout-breakpoint-desktop: 1025px;
+  --pcoi-layout-breakpoint-tablet: 1024px;
+  --pcoi-layout-breakpoint-mobile: 768px;
+  --pcoi-layout-breakpoint-small: 480px;
+  --pcoi-layout-zIndex-base: 1;
+  --pcoi-layout-zIndex-content: 1;
+  --pcoi-layout-zIndex-mobile-menu: 100;
+  --pcoi-layout-zIndex-nav: 1000;
+  --pcoi-layout-zIndex-dropdown: 200;
+  --pcoi-layout-zIndex-modal: 500;
+  --pcoi-layout-zIndex-toast: 600;
+  --pcoi-layout-component-control-box: 18px;
+  --pcoi-layout-component-radio-dot: 8px;
+  --pcoi-layout-component-toggle-track-w: 40px;
+  --pcoi-layout-component-toggle-track-h: 22px;
+  --pcoi-layout-component-toggle-thumb: 16px;
+  --pcoi-layout-component-toggle-thumb-inset: 3px;
+  --pcoi-layout-component-toggle-thumb-travel: 18px;
+  --pcoi-layout-component-toggle-check-w: 4px;
+  --pcoi-layout-component-toggle-check-h: 7px;
+  --pcoi-layout-component-toggle-check-stroke: 1.5px;
+  --pcoi-layout-component-icon-box: 52px;
+  --pcoi-layout-component-step-number: 48px;
+  --pcoi-layout-component-hamburger: 28px;
+  --pcoi-layout-component-hamburger-bar-offset: 7px;
+  --pcoi-layout-component-accent-line-w: 60px;
+  --pcoi-layout-component-accent-border-w: 3px;
+  --pcoi-layout-component-bullet: 8px;
+
+  /* ── Tier 1: Sizing Primitives ── */
+  --pcoi-sizing-height-xs: 24px; /* 1.5rem — compact badges, tags, small indicators */
+  --pcoi-sizing-height-sm: 32px; /* 2rem — small buttons, compact controls */
+  --pcoi-sizing-height-md: 40px; /* 2.5rem — standard inputs, default buttons, selects */
+  --pcoi-sizing-height-lg: 48px; /* 3rem — large buttons, step numbers, prominent controls */
+  --pcoi-sizing-height-xl: 64px; /* 4rem — large interactive areas, icon containers */
+  --pcoi-sizing-height-2xl: 80px; /* 5rem — hero-scale elements, feature panels */
+
+  /* ── Tier 3: Semantic Color Tokens ── */
+  /* These reference primitives via var(). Apply ONLY these to designs. */
+  --pcoi-semantic-bg-default: var(--pcoi-color-bg); /* Page-level background */
+  --pcoi-semantic-bg-alt: var(--pcoi-color-bg-alt); /* Alternating dark sections (.section-dark) */
+  --pcoi-semantic-bg-card: var(--pcoi-color-bg-card); /* Card and panel fills */
+  --pcoi-semantic-bg-card-hover: var(--pcoi-color-bg-card-hover); /* Card fills on hover */
+  --pcoi-semantic-bg-surface: var(--pcoi-color-surface); /* Forms, callouts, elevated containers */
+  --pcoi-semantic-bg-nav-scrolled: var(--pcoi-color-nav-scrolled-bg); /* Navbar after scroll */
+  --pcoi-semantic-bg-overlay: rgba(0, 0, 0, 0.6); /* Modal/dialog backdrop overlay */
+  --pcoi-semantic-text-primary: var(--pcoi-color-text-primary); /* Headings, body, primary content */
+  --pcoi-semantic-text-secondary: var(--pcoi-color-text-secondary); /* Descriptions, supporting text, nav links */
+  --pcoi-semantic-text-muted: var(--pcoi-color-text-muted); /* Placeholders, footnotes, timestamps */
+  --pcoi-semantic-text-accent: var(--pcoi-color-accent); /* Badges, labels, section labels, emphasis */
+  --pcoi-semantic-text-accent-hover: var(--pcoi-color-accent-hover); /* Accent text on hover (links, interactive) */
+  --pcoi-semantic-text-on-accent: var(--pcoi-color-bg); /* Text on accent-colored backgrounds */
+  --pcoi-semantic-text-success: var(--pcoi-color-success); /* Success message text */
+  --pcoi-semantic-text-error: var(--pcoi-color-error); /* Error message text and required indicators */
+  --pcoi-semantic-text-warning: var(--pcoi-color-warning); /* Warning message text */
+  --pcoi-semantic-text-info: var(--pcoi-color-info); /* Info message text */
+  --pcoi-semantic-action-primary-bg: var(--pcoi-color-accent); /* Primary button background */
+  --pcoi-semantic-action-primary-bg-hover: var(--pcoi-color-accent-hover); /* Primary button hover background */
+  --pcoi-semantic-action-primary-text: var(--pcoi-color-bg); /* Primary button text (dark on gold) */
+  --pcoi-semantic-action-ghost-bg: transparent; /* Ghost button default background */
+  --pcoi-semantic-action-ghost-bg-hover: var(--pcoi-color-ghost-hover-bg); /* Ghost button hover background */
+  --pcoi-semantic-action-ghost-border: var(--pcoi-color-border-hover); /* Ghost button border */
+  --pcoi-semantic-action-ghost-border-hover: var(--pcoi-color-ghost-hover-border); /* Ghost button hover border */
+  --pcoi-semantic-action-ghost-text: var(--pcoi-color-text-secondary); /* Ghost button text */
+  --pcoi-semantic-action-ghost-text-hover: var(--pcoi-color-text-primary); /* Ghost button hover text */
+  --pcoi-semantic-action-toggle-bg: var(--pcoi-color-border-hover); /* Toggle track background in off state */
+  --pcoi-semantic-action-toggle-bg-on: var(--pcoi-color-accent); /* Toggle track background in on state */
+  --pcoi-semantic-action-toggle-thumb: #FFFFFF; /* Toggle thumb (circle) color */
+  --pcoi-semantic-action-success: var(--pcoi-color-success); /* Form submission success state */
+  --pcoi-semantic-action-error: var(--pcoi-color-error); /* Validation errors, destructive actions */
+  --pcoi-semantic-action-warning: var(--pcoi-color-warning); /* Caution states, deprecation notices */
+  --pcoi-semantic-action-info: var(--pcoi-color-info); /* Informational tips and neutral alerts */
+  --pcoi-semantic-action-success-bg: rgba(42, 125, 95, 0.08); /* Subtle success background tint for badges and status indicators */
+  --pcoi-semantic-action-error-bg: rgba(224, 82, 82, 0.08); /* Subtle error background tint for invalid form fields */
+  --pcoi-semantic-action-warning-bg: rgba(232, 148, 58, 0.08); /* Subtle warning background tint for badges and status indicators */
+  --pcoi-semantic-action-info-bg: rgba(91, 139, 212, 0.08); /* Subtle info background tint for badges and status indicators */
+  --pcoi-semantic-border-default: var(--pcoi-color-border); /* Default card/section borders */
+  --pcoi-semantic-border-hover: var(--pcoi-color-border-hover); /* Borders on hover state */
+  --pcoi-semantic-border-card: var(--pcoi-color-border-soft); /* Soft decorative card border — no WCAG requirement */
+  --pcoi-semantic-border-card-hover: var(--pcoi-color-border-soft-hover); /* Soft decorative card border on hover */
+  --pcoi-semantic-border-accent-subtle: var(--pcoi-color-accent-border-subtle); /* Accent-tinted borders (principle hover) */
+  --pcoi-semantic-border-accent-dim: var(--pcoi-color-accent-border-dim); /* Dim accent borders (step numbers) */
+  --pcoi-semantic-border-nav: var(--pcoi-color-border); /* Nav scrolled bottom border */
+  --pcoi-semantic-border-input-hover: var(--pcoi-color-border-hover); /* Form input border on hover */
+  --pcoi-semantic-border-success: var(--pcoi-color-success); /* Success state border */
+  --pcoi-semantic-border-error: var(--pcoi-color-error); /* Invalid form field border */
+  --pcoi-semantic-border-warning: var(--pcoi-color-warning); /* Warning state border */
+  --pcoi-semantic-border-info: var(--pcoi-color-info); /* Info state border */
+  --pcoi-semantic-surface-accent-dim: var(--pcoi-color-accent-dim); /* Icon boxes, badges, step number bg, comparison highlight */
+  --pcoi-semantic-surface-accent-glow: var(--pcoi-color-accent-glow); /* Shadow glow on accent actions */
+  --pcoi-semantic-surface-highlight: var(--pcoi-color-highlight); /* Subtle highlight backgrounds */
+  --pcoi-semantic-surface-elevated: var(--pcoi-color-bg-card); /* Elevated surface for modals, dropdowns */
+  --pcoi-semantic-focus-border: var(--pcoi-color-focus-border); /* Input focus border color */
+  --pcoi-semantic-focus-glow: var(--pcoi-color-focus-glow); /* Input focus outer ring (box-shadow) */
+
+  /* ── Tier 3: Semantic Spacing Tokens ── */
+  --pcoi-semantic-spacing-section-y: var(--pcoi-spacing-80); /* Vertical padding for page sections */
+  --pcoi-semantic-spacing-section-y-lg: var(--pcoi-spacing-120); /* Vertical padding for large/hero sections */
+  --pcoi-semantic-spacing-component-gap: var(--pcoi-spacing-40); /* Default gap between stacked components */
+  --pcoi-semantic-spacing-card-padding: var(--pcoi-spacing-36); /* Internal padding for cards and panels */
+  --pcoi-semantic-spacing-card-gap: var(--pcoi-spacing-20); /* Gap between elements inside a card */
+  --pcoi-semantic-spacing-form-gap: var(--pcoi-spacing-20); /* Gap between form fields */
+  --pcoi-semantic-spacing-form-padding: var(--pcoi-spacing-40); /* Internal padding for form containers */
+  --pcoi-semantic-spacing-input-x: var(--pcoi-spacing-16); /* Horizontal padding inside inputs */
+  --pcoi-semantic-spacing-input-y: var(--pcoi-spacing-12); /* Vertical padding inside inputs */
+  --pcoi-semantic-spacing-btn-x: var(--pcoi-spacing-24); /* Horizontal padding for default buttons */
+  --pcoi-semantic-spacing-btn-y: var(--pcoi-spacing-10); /* Vertical padding for default buttons */
+  --pcoi-semantic-spacing-btn-x-lg: var(--pcoi-spacing-36); /* Horizontal padding for large buttons */
+  --pcoi-semantic-spacing-btn-y-lg: var(--pcoi-spacing-16); /* Vertical padding for large buttons */
+  --pcoi-semantic-spacing-nav-height: var(--pcoi-spacing-72); /* Navigation bar height */
+  --pcoi-semantic-spacing-stack-sm: var(--pcoi-spacing-8); /* Small vertical stack spacing (labels, badges) */
+  --pcoi-semantic-spacing-stack-md: var(--pcoi-spacing-16); /* Medium vertical stack spacing (headings, paragraphs) */
+  --pcoi-semantic-spacing-stack-lg: var(--pcoi-spacing-32); /* Large vertical stack spacing (content blocks) */
+  --pcoi-semantic-spacing-inline-sm: var(--pcoi-spacing-8); /* Small inline spacing (icon + text) */
+  --pcoi-semantic-spacing-inline-md: var(--pcoi-spacing-16); /* Medium inline spacing (nav links) */
+
+  /* ── Tier 3: Semantic Radius Tokens ── */
+  --pcoi-semantic-radius-btn: var(--pcoi-radius-sm); /* Border radius for buttons */
+  --pcoi-semantic-radius-input: var(--pcoi-radius-sm); /* Border radius for form inputs and textareas */
+  --pcoi-semantic-radius-card: var(--pcoi-radius-md); /* Border radius for cards and panels */
+  --pcoi-semantic-radius-panel: var(--pcoi-radius-lg); /* Border radius for large panels and form containers */
+  --pcoi-semantic-radius-badge: var(--pcoi-radius-full); /* Border radius for badges and pills */
+  --pcoi-semantic-radius-avatar: var(--pcoi-radius-full); /* Border radius for avatars and step numbers */
+
+  /* ── Tier 3: Semantic Typography Tokens ── */
+  --pcoi-semantic-type-heading-font: var(--pcoi-font-family-sans); /* Font family for headings */
+  --pcoi-semantic-type-body-font: var(--pcoi-font-family-sans); /* Font family for body text and form inputs */
+  --pcoi-semantic-type-mono-font: var(--pcoi-font-family-mono); /* Font family for code, labels, badges, and step numbers */
+  --pcoi-semantic-type-display-size: clamp(2.5rem, 5vw, 4rem); /* Hero h1 — fluid 40–64px */
+  --pcoi-semantic-type-section-title-size: clamp(1.75rem, 3.5vw, 2.75rem); /* Main section headings — fluid 28–44px (SectionHeader) */
+  --pcoi-semantic-type-section-title-sm-size: clamp(1.75rem, 3.5vw, 2.5rem); /* CTA section headings — fluid 28–40px */
+  --pcoi-semantic-type-section-title-xs-size: clamp(1.5rem, 3vw, 2.25rem); /* Smaller section headings — fluid 24–36px */
+  --pcoi-semantic-type-heading-md-size: var(--pcoi-font-size-h3); /* Card/subsection heading (h3) */
+  --pcoi-semantic-type-heading-sm-size: var(--pcoi-font-size-sub); /* Small heading — modal titles, panel titles, signals headings */
+  --pcoi-semantic-type-step-title-size: var(--pcoi-font-size-h3-lg); /* How-step titles */
+  --pcoi-semantic-type-card-subtitle-size: var(--pcoi-font-size-lead); /* Principle card titles */
+  --pcoi-semantic-type-body-size: var(--pcoi-font-size-body-default); /* Default body text — descriptions, form inputs, buttons, toast */
+  --pcoi-semantic-type-body-lg-size: var(--pcoi-font-size-body-lg); /* Large body text — mobile menu links, large buttons */
+  --pcoi-semantic-type-body-compact-size: var(--pcoi-font-size-body); /* Compact body — table cells, signals items, who-card body */
+  --pcoi-semantic-type-body-sm-size: var(--pcoi-font-size-body-sm); /* Small body — attributions, step numbers, footer tagline */
+  --pcoi-semantic-type-nav-size: var(--pcoi-font-size-nav); /* Navigation links, footer links */
+  --pcoi-semantic-type-label-size: var(--pcoi-font-size-caption); /* Form labels, table headers, error messages */
+  --pcoi-semantic-type-section-label-size: var(--pcoi-font-size-sm); /* Section labels (The Problem, How It Works, etc.) */
+  --pcoi-semantic-type-badge-size: var(--pcoi-font-size-xs); /* Badge text */
+  --pcoi-semantic-type-callout-size: var(--pcoi-font-size-callout); /* Callout quote text */
+  --pcoi-semantic-type-logo-size: var(--pcoi-font-size-logo); /* Logo mark text */
+  --pcoi-semantic-type-close-sm-size: var(--pcoi-font-size-close-sm); /* Toast close button icon */
+  --pcoi-semantic-type-close-lg-size: var(--pcoi-font-size-close-lg); /* Modal close button icon */
+  --pcoi-semantic-type-display-weight: var(--pcoi-font-weight-extrabold); /* Hero h1 weight (800) */
+  --pcoi-semantic-type-heading-weight: var(--pcoi-font-weight-bold); /* Section headings (h2) */
+  --pcoi-semantic-type-emphasis-weight: var(--pcoi-font-weight-semibold); /* Buttons, card titles, step titles, modal titles */
+  --pcoi-semantic-type-label-weight: var(--pcoi-font-weight-medium); /* Labels, nav links, mono elements */
+  --pcoi-semantic-type-body-weight: var(--pcoi-font-weight-regular); /* Body text */
+  --pcoi-semantic-type-callout-weight: var(--pcoi-font-weight-light); /* Callout quotes */
+  --pcoi-semantic-type-display-line-height: var(--pcoi-font-lineHeight-tight); /* Hero h1 line-height (1.1) */
+  --pcoi-semantic-type-heading-line-height: var(--pcoi-font-lineHeight-heading); /* Headings (1.2) */
+  --pcoi-semantic-type-body-line-height: var(--pcoi-font-lineHeight-body); /* Body text (1.6) */
+  --pcoi-semantic-type-body-compact-line-height: var(--pcoi-font-lineHeight-body-sm); /* Compact body — callout, table cells, signals, footer, toast (1.5) */
+  --pcoi-semantic-type-step-line-height: var(--pcoi-font-lineHeight-step); /* Step descriptions (1.65) */
+  --pcoi-semantic-type-relaxed-line-height: var(--pcoi-font-lineHeight-relaxed); /* Section descriptions (1.7) */
+  --pcoi-semantic-type-none-line-height: var(--pcoi-font-lineHeight-none); /* No extra leading — buttons, badges, close icons (1) */
+  --pcoi-semantic-type-display-letter-spacing: var(--pcoi-font-letterSpacing-tight); /* Hero h1 letter-spacing (-0.03em) */
+  --pcoi-semantic-type-heading-letter-spacing: var(--pcoi-font-letterSpacing-heading); /* Section headings (-0.02em) */
+  --pcoi-semantic-type-label-letter-spacing: var(--pcoi-font-letterSpacing-label); /* Form labels, table headers (0.06em) */
+  --pcoi-semantic-type-section-label-letter-spacing: var(--pcoi-font-letterSpacing-section); /* Section labels (0.1em) */
+  --pcoi-semantic-type-badge-letter-spacing: var(--pcoi-font-letterSpacing-badge); /* Badges (0.08em) */
+  --pcoi-semantic-type-logo-letter-spacing: var(--pcoi-font-letterSpacing-logo); /* Logo mark (0.04em) */
+
+  /* ── Tier 3: Semantic Sizing Tokens ── */
+  --pcoi-semantic-sizing-input-height: var(--pcoi-sizing-height-md); /* Standard form input height (FormField, Select) */
+  --pcoi-semantic-sizing-btn-height: var(--pcoi-sizing-height-md); /* Default button height */
+  --pcoi-semantic-sizing-btn-height-lg: var(--pcoi-sizing-height-lg); /* Large button height (.pcoi-btn--large) */
+  --pcoi-semantic-sizing-btn-height-nav: var(--pcoi-sizing-height-sm); /* Nav CTA button height (compact) */
+  --pcoi-semantic-sizing-textarea-min-height: var(--pcoi-sizing-height-2xl); /* Textarea minimum height */
+  --pcoi-semantic-sizing-badge-height: var(--pcoi-sizing-height-xs); /* Badge and tag height */
+  --pcoi-semantic-sizing-step-number: var(--pcoi-sizing-height-lg); /* HowStep number circle diameter (48px) */
+  --pcoi-semantic-sizing-icon-box: 52px; /* Card icon container size (custom — between lg and xl) */
+
+  /* ── Legacy Compatibility (matches original CSS vars from pcoi.ai) ── */
+  --color-bg: var(--pcoi-color-bg);
+  --color-bg-alt: var(--pcoi-color-bg-alt);
+  --color-bg-card: var(--pcoi-color-bg-card);
+  --color-bg-card-hover: var(--pcoi-color-bg-card-hover);
+  --color-surface: var(--pcoi-color-surface);
+  --color-border: var(--pcoi-color-border);
+  --color-border-hover: var(--pcoi-color-border-hover);
+  --color-text: var(--pcoi-color-text-primary);
+  --color-text-secondary: var(--pcoi-color-text-secondary);
+  --color-text-muted: var(--pcoi-color-text-muted);
+  --color-accent: var(--pcoi-color-accent);
+  --color-accent-hover: var(--pcoi-color-accent-hover);
+  --color-accent-glow: var(--pcoi-color-accent-glow);
+  --color-accent-dim: var(--pcoi-color-accent-dim);
+  --color-highlight: var(--pcoi-color-highlight);
+  --font-sans: var(--pcoi-font-family-sans);
+  --font-mono: var(--pcoi-font-family-mono);
+  --font-family-sans: var(--pcoi-font-family-sans);
+  --font-family-mono: var(--pcoi-font-family-mono);
+  --radius-sm: var(--pcoi-radius-sm);
+  --radius-md: var(--pcoi-radius-md);
+  --radius-lg: var(--pcoi-radius-lg);
+  --radius-xl: var(--pcoi-radius-xl);
+  --container-max: var(--pcoi-layout-container-max);
+  --container-narrow: var(--pcoi-layout-container-narrow);
+}
+
+/* ============================================
+   Light Theme Overrides
+   Apply via data-theme="light" on a container or :root
+   ============================================ */
+
+[data-theme="light"] {
+  /* ── Color Primitive Overrides ── */
+  --pcoi-color-bg: #F5F5FA;
+  --pcoi-color-bg-alt: #EEEEF6;
+  --pcoi-color-bg-card: #FFFFFF;
+  --pcoi-color-bg-card-hover: #F8F8FD;
+  --pcoi-color-surface: #FFFFFF;
+  --pcoi-color-accent: #A8801E;
+  --pcoi-color-accent-hover: #A07520;
+  --pcoi-color-text-primary: #1A1A2E;
+  --pcoi-color-text-secondary: #4A4A68;
+  --pcoi-color-text-muted: #6A6A86;
+  --pcoi-color-success: #1B6B4A;
+  --pcoi-color-error: #C03C3C;
+  --pcoi-color-warning: #C07828;
+  --pcoi-color-info: #4068B8;
+  --pcoi-color-border: rgba(0, 0, 0, 0.45);
+  --pcoi-color-border-hover: rgba(0, 0, 0, 0.55);
+  --pcoi-color-border-soft: rgba(0, 0, 0, 0.10);
+  --pcoi-color-border-soft-hover: rgba(0, 0, 0, 0.18);
+  --pcoi-color-accent-glow: rgba(184, 137, 42, 0.15);
+  --pcoi-color-accent-dim: rgba(184, 137, 42, 0.06);
+  --pcoi-color-highlight: rgba(184, 137, 42, 0.04);
+  --pcoi-color-nav-scrolled-bg: rgba(245, 245, 250, 0.92);
+  --pcoi-color-ghost-hover-bg: rgba(0, 0, 0, 0.04);
+  --pcoi-color-ghost-hover-border: rgba(0, 0, 0, 0.45);
+  --pcoi-color-focus-border: rgba(120, 90, 10, 0.70);
+  --pcoi-color-focus-glow: rgba(184, 137, 42, 0.12);
+  --pcoi-color-accent-border-subtle: rgba(80, 60, 5, 0.65);
+  --pcoi-color-accent-border-dim: rgba(80, 60, 5, 0.60);
+  --pcoi-color-grid-line: rgba(0, 0, 0, 0.04);
+
+  /* ── Semantic Color Tokens (re-declared for light-context resolution) ── */
+  --pcoi-semantic-bg-default: var(--pcoi-color-bg);
+  --pcoi-semantic-bg-alt: var(--pcoi-color-bg-alt);
+  --pcoi-semantic-bg-card: var(--pcoi-color-bg-card);
+  --pcoi-semantic-bg-card-hover: var(--pcoi-color-bg-card-hover);
+  --pcoi-semantic-bg-surface: var(--pcoi-color-surface);
+  --pcoi-semantic-bg-nav-scrolled: var(--pcoi-color-nav-scrolled-bg);
+  --pcoi-semantic-bg-overlay: rgba(0, 0, 0, 0.6);
+  --pcoi-semantic-text-primary: var(--pcoi-color-text-primary);
+  --pcoi-semantic-text-secondary: var(--pcoi-color-text-secondary);
+  --pcoi-semantic-text-muted: var(--pcoi-color-text-muted);
+  --pcoi-semantic-text-accent: var(--pcoi-color-accent);
+  --pcoi-semantic-text-accent-hover: var(--pcoi-color-accent-hover);
+  --pcoi-semantic-text-on-accent: var(--pcoi-color-bg);
+  --pcoi-semantic-text-success: var(--pcoi-color-success);
+  --pcoi-semantic-text-error: var(--pcoi-color-error);
+  --pcoi-semantic-text-warning: var(--pcoi-color-warning);
+  --pcoi-semantic-text-info: var(--pcoi-color-info);
+  --pcoi-semantic-action-primary-bg: var(--pcoi-color-accent);
+  --pcoi-semantic-action-primary-bg-hover: var(--pcoi-color-accent-hover);
+  --pcoi-semantic-action-primary-text: var(--pcoi-color-bg);
+  --pcoi-semantic-action-ghost-bg: transparent;
+  --pcoi-semantic-action-ghost-bg-hover: var(--pcoi-color-ghost-hover-bg);
+  --pcoi-semantic-action-ghost-border: var(--pcoi-color-border-hover);
+  --pcoi-semantic-action-ghost-border-hover: var(--pcoi-color-ghost-hover-border);
+  --pcoi-semantic-action-ghost-text: var(--pcoi-color-text-secondary);
+  --pcoi-semantic-action-ghost-text-hover: var(--pcoi-color-text-primary);
+  --pcoi-semantic-action-toggle-bg: var(--pcoi-color-border-hover);
+  --pcoi-semantic-action-toggle-bg-on: var(--pcoi-color-accent);
+  --pcoi-semantic-action-toggle-thumb: #FFFFFF;
+  --pcoi-semantic-action-success: var(--pcoi-color-success);
+  --pcoi-semantic-action-error: var(--pcoi-color-error);
+  --pcoi-semantic-action-warning: var(--pcoi-color-warning);
+  --pcoi-semantic-action-info: var(--pcoi-color-info);
+  --pcoi-semantic-action-success-bg: rgba(42, 125, 95, 0.08);
+  --pcoi-semantic-action-error-bg: rgba(224, 82, 82, 0.08);
+  --pcoi-semantic-action-warning-bg: rgba(232, 148, 58, 0.08);
+  --pcoi-semantic-action-info-bg: rgba(91, 139, 212, 0.08);
+  --pcoi-semantic-border-default: var(--pcoi-color-border);
+  --pcoi-semantic-border-hover: var(--pcoi-color-border-hover);
+  --pcoi-semantic-border-card: var(--pcoi-color-border-soft);
+  --pcoi-semantic-border-card-hover: var(--pcoi-color-border-soft-hover);
+  --pcoi-semantic-border-accent-subtle: var(--pcoi-color-accent-border-subtle);
+  --pcoi-semantic-border-accent-dim: var(--pcoi-color-accent-border-dim);
+  --pcoi-semantic-border-nav: var(--pcoi-color-border);
+  --pcoi-semantic-border-input-hover: var(--pcoi-color-border-hover);
+  --pcoi-semantic-border-success: var(--pcoi-color-success);
+  --pcoi-semantic-border-error: var(--pcoi-color-error);
+  --pcoi-semantic-border-warning: var(--pcoi-color-warning);
+  --pcoi-semantic-border-info: var(--pcoi-color-info);
+  --pcoi-semantic-surface-accent-dim: var(--pcoi-color-accent-dim);
+  --pcoi-semantic-surface-accent-glow: var(--pcoi-color-accent-glow);
+  --pcoi-semantic-surface-highlight: var(--pcoi-color-highlight);
+  --pcoi-semantic-surface-elevated: var(--pcoi-color-bg-card);
+  --pcoi-semantic-focus-border: var(--pcoi-color-focus-border);
+  --pcoi-semantic-focus-glow: var(--pcoi-color-focus-glow);
+
+  /* ── Semantic Overrides (hardcoded values) ── */
+  --pcoi-semantic-text-on-accent: #1A1A2E; /* Dark text on accent backgrounds (buttons) */
+  --pcoi-semantic-action-primary-text: #1A1A2E; /* Primary button text stays dark on gold */
+  --pcoi-semantic-action-toggle-thumb: #FFFFFF; /* Toggle thumb stays white */
+  --pcoi-semantic-text-accent: #7A5C1A; /* Darker gold for WCAG AA 4.5:1 text on light backgrounds */
+  --pcoi-semantic-text-warning: #9A5E18; /* Darker amber for WCAG AA 4.5:1 text on light backgrounds */
+
+  /* ── Effect Overrides ── */
+  --pcoi-effect-shadow-nav-scrolled: 0 1px 0 rgba(0, 0, 0, 0.08); /* Nav hairline — dark instead of light */
+  --pcoi-effect-shadow-mobile-menu: 0 12px 40px rgba(0, 0, 0, 0.12); /* Lighter mobile menu shadow */
+  --pcoi-effect-shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.10); /* Lighter elevated shadow for modals */
+}