:root {
  /* Kleuren */
  --color-navy: #17324D;
  --color-sage: #6F8F83;
  --color-offwhite: #FCFCFA;
  --color-sand: #F4F1EA;
  --color-charcoal: #263238;
  --color-orange: #D98252;
  --color-orange-dark: #C06E40;
  --color-sage-bg: #E5EFEA;
  --color-border: #DCE2E0;
  --color-error: #B42318;
  --color-error-bg: #FBEAE8;
  --color-success: #357A62;
  --color-success-bg: #E9F3EE;
  --color-white: #FFFFFF;

  /* Typografie */
  --font-heading: "Poppins", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Inter", Helvetica, Arial, sans-serif;

  --fs-h1: clamp(2.25rem, 1.7rem + 2.2vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  --fs-h3: clamp(1.375rem, 1.25rem + 0.5vw, 1.75rem);
  --fs-h4: 1.25rem;
  --fs-body-lg: 1.0625rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;

  --lh-heading: 1.2;
  --lh-body: 1.6;

  /* Ruimte */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Vormgeving */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(23, 50, 77, 0.06), 0 1px 3px rgba(23, 50, 77, 0.08);
  --shadow-md: 0 4px 12px rgba(23, 50, 77, 0.08), 0 2px 4px rgba(23, 50, 77, 0.06);
  --shadow-lg: 0 12px 32px rgba(23, 50, 77, 0.12);

  --content-max: 1240px;
  --header-h: 96px;
  --header-h-scrolled: 72px;

  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;

  --focus-ring: 0 0 0 3px rgba(217, 130, 82, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
  }
}