:root {
  /* Color — semantic (Figma: Foundations, Color collection) */
  --background: #ffffff;
  --surface: #f3f4f6;
  --border: #d1d5db;
  --text-primary: #111111;
  --text-secondary: #4b5563;
  --accent-base: #8b5cf6;

  --fit-strong: #28c840;
  --fit-medium: #febc2e;
  --fit-weak: #ff5f57;

  /* Color — additional Figma semantic tokens (no prior scaffold slot) */
  --surface-alt: #ffffff;
  --footer-background: #f3f4f6;
  --icon-primary: #111111;
  --fit-text: #111111;
  --ai-text: #ffffff;

  /* Color — constant across Light/Dark (confirmed via Figma dark-bound instances) */
  --accent-deep: #7c3aed;
  --cta-text: #ffffff;
  --focus-ring: #a78bfa;
  --overlay-scrim: #00000080;

  /* Effects — shared across Light/Dark (CTA shadow's "(Light)" Figma name is legacy; one token) */
  --shadow-high: 0px 10px 20px 0px #00000026;
  --shadow-cta: 0px 2px 6px 0px #0000001f;
  --shadow-media-card: 0px 2px 6px 0px #00000040;

  /* Typography */
  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --text-h1-desktop: 700 48px/1.2 var(--font-family-base);
  --text-h1-mobile: 700 32px/1.2 var(--font-family-base);
  --text-h2-desktop: 600 36px/1.25 var(--font-family-base);
  --text-h2-mobile: 600 28px/1.25 var(--font-family-base);
  --text-h3-desktop: 600 28px/1.3 var(--font-family-base);
  --text-h3-mobile: 600 22px/1.3 var(--font-family-base);
  --text-h4-desktop: 500 22px/1.3 var(--font-family-base);
  --text-h4-mobile: 500 18px/1.3 var(--font-family-base);
  --text-body-desktop: 400 16px/1.5 var(--font-family-base);
  --text-body-mobile: 400 15px/1.5 var(--font-family-base);
  --text-body-bold-desktop: 700 16px/1.5 var(--font-family-base);
  --text-body-bold-mobile: 700 15px/1.5 var(--font-family-base);
  --text-caption-desktop: 400 14px/1.4 var(--font-family-base);
  --text-caption-mobile: 400 12px/1.4 var(--font-family-base);
  --text-caption-bold-desktop: 700 14px/1.4 var(--font-family-base);
  --text-caption-bold-mobile: 700 12px/1.4 var(--font-family-base);
  --text-eyebrow: 500 12px/1.4 var(--font-family-base);
  --text-eyebrow-transform: uppercase;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #111827;
    --surface: #252f3f;
    --border: #4b5563;
    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --accent-base: #a78bfa;

    --fit-strong: #32d74b;
    --fit-medium: #ffd60a;
    --fit-weak: #ff453a;

    --surface-alt: #303b4d;
    --footer-background: #1f2937;
    --icon-primary: #f9fafb;
    --fit-text: #252f3f;
    --ai-text: #252f3f;
  }
}