:root {
  /* Colors: DESIGN.md palette, strictly enforced */
  --color-white: #ffffff;
  --color-off-white: #f5f5f7;
  --color-black: #000000;
  --color-gray-deep: #1c1c1e;
  --color-gray-system: #8e8e93; /* large-scale muted text only - see note below */
  --color-gray-muted-body: #6e6e73; /* body-size secondary text; ~4.7:1 on white, passes WCAG AA */
  --color-accent: #0055ff;
  --color-accent-tint: #eaf0ff;
  --color-hairline: #e5e5e7;

  /*
    Contrast note: #8e8e93 measures ~3.27:1 on #ffffff and ~3.1:1 on #f5f5f7 -
    both fail WCAG AA for body text (4.5:1). It is reserved for large text only
    (>=24px regular / >=18.66px bold). Everything at body/caption/label size uses
    --color-gray-muted-body instead (~4.7:1 on white).
  */

  /* Spacing: 8px base scale */
  --space-xs: 4px;
  --space-sm: 12px;
  --space-base: 8px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --container-max: 1200px;
  --gutter: 24px;

  /* Radii */
  --radius-sm: 4px;
  --radius-default: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadow: the one permitted style */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.04);

  /* Typography */
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-hero: clamp(3.5rem, 6vw, 6rem);
  --text-hero-mobile: clamp(2rem, 8vw, 3rem);
  --text-section-heading: 56px;
  --text-section-heading-mobile: 32px;
  --text-headline-md: 28px;
  --text-body-lg: 19px;
  --text-body-md: 16px;
  --text-label-sm: 13px;
}