:root {
  /* ── Spacing scale ── */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 100px;

  /* ── Corner radii ── */
  --radius-sm: 7px;   /* nav button */
  --radius-md: 8px;   /* primary/outline button, input */
  --radius-lg: 16px;  /* cards */
  --radius-pill: 20px; /* badges */
  --radius-cta: 10px;  /* standalone section CTA button */

  /* ── Layout ── */
  --layout-side-padding: 5%;
  --content-max-hero: 1160px;
  --content-max-section: 960px;
  --content-max-wide-section: 1000px;

  /* ── Breakpoints (reference values — use in JS matchMedia; @media needs literals) ── */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1024px;
}