:root {
  /* Brand colors */
  --color-brand-blue: #1b5fa6;
  --color-brand-blue-dark: #144a85;
  --color-brand-blue-pale: #eaf1f8;
  --color-cta-orange: #f5820f;
  --color-cta-orange-dark: #d66e08;

  /* Near-white / near-black (never pure #FFF/#000) */
  --color-near-white: #fcfcfd;
  --color-near-black: #1a1d21;
  --color-body-text: #2b2f33;
  --color-muted-text: #565c63;
  --color-border: #dde3ea;

  /* Typography */
  --font-display: "Poppins", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --step-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.95rem);
  --step-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-md: clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem);
  --step-lg: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-xl: clamp(2rem, 1.6rem + 2vw, 2.75rem);
  --step-2xl: clamp(2.5rem, 1.9rem + 3vw, 3.75rem);

  /* Spacing scale */
  --space-2xs: clamp(0.5rem, 0.46rem + 0.2vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.68rem + 0.35vw, 1rem);
  --space-sm: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  --space-md: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --space-lg: clamp(2.25rem, 1.85rem + 2vw, 3.5rem);
  --space-xl: clamp(3.5rem, 2.8rem + 3.5vw, 6rem);

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 999px;

  /* Layout */
  --container-width: 1200px;
  --container-pad: var(--space-sm);

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgb(26 29 33 / 8%);
  --shadow-md: 0 4px 16px rgb(26 29 33 / 12%);
}