:root {
  /* Kleuren — exact uit merk-palet */
  --c-terracotta: #B06545;
  --c-cream:      #F0EBE3;
  --c-offwhite:   #FBF8F2;
  --c-olive:      #6B705C;
  --c-sage:       #B8B7A3;
  --c-espresso:   #46331F;
  --c-grey:       #626262;
  --c-white:      #FFFFFF;

  /* Rollen */
  --bg-page:      var(--c-offwhite);
  --bg-section:   var(--c-cream);
  --bg-dark:      var(--c-olive);
  --text:         var(--c-espresso);
  --text-muted:   var(--c-grey);
  --accent:       var(--c-terracotta);

  /* Typografie */
  --font-head: "Spectral", Georgia, "Times New Roman", serif;
  --font-body: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --fw-body: 400;
  --fw-head: 500; /* Spectral Medium */

  /* Schaal (fluid) */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.2vw, 2.5rem);   /* H2 ≈40px desktop — breedte-match design ("Je functioneert…" 718px) */
  --step-4:  clamp(2.1rem, 1.75rem + 1.4vw, 2.85rem); /* H1 ≈45px desktop — breedte-match design ("Je lichaam werkt niet" 427px) */

  /* Ruimte */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4.5rem;
  --space-2xl: 7rem;

  --container: 1300px; /* design: content ~1300 (marge ~300 op 1900) */
  --container-narrow: 820px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 18px 40px -24px rgba(70, 51, 31, 0.35);
}