/* De Bonenboer design system — single source of truth.
   Warm & aards: espresso + kraft/crema op een zachte cream-basis.
   Never hardcode colour/space/type in components; pull from here.
   NB: de token-NAMEN (--terracotta/--plum) zijn historisch (kloon van Nestell); de WAARDEN zijn
   nu espresso/roast. Namen bewust behouden om 140+ usages niet te breken — hernoemen = aparte refactor. */
:root {
  /* --- Brand palette (espresso/cream/kraft) --- */
  --terracotta:        #5E361C;  /* PRIMAIR = espresso — CTA, badges, accenten, uitgelichte prijzen */
  --terracotta-strong: #40230F;  /* hover/active — diepere espresso */
  --terracotta-soft:   #D9BE9C;  /* zachte crema-tint — borders/soft wash */
  --terracotta-wash:   #F1E7D7;  /* zeer lichte crema-achtergrondwash */

  --espresso:      #5E361C;  /* De Bonenboer merkbruin — logo (= primair) */
  --espresso-deep: #40230F;  /* donkerder espresso — hover/donker */
  --kraft:         #C89A6A;  /* warme kraft/crema-tint — decoratieve accenten */

  --plum:        #33200F;  /* SECUNDAIR = deep roast — footer, iconen, kaders */
  --plum-soft:   #6B4A31;  /* hover/secundaire tekst — gebrande koffie */
  --plum-wash:   #EDE4D6;  /* lichte warme achtergrondwash */

  --cream:       #F9F6F0;  /* achtergrond (zachter dan spierwit) */
  --cream-deep:  #F1EADD;  /* sectie-achtergrond / cards */
  --surface:     #FFFDFA;  /* verhoogde kaarten */
  --ink:         #2A211B;  /* warm koffie-houtskool — leestekst */
  --muted:       #6F625A;  /* secundaire tekst */
  --line:        #E7DCCB;  /* warme randen/dividers (nooit stippellijn) */

  --sage:        #7C8B6F;  /* rust-/eco-accent voor voorraad/"gelukt" (past bij mens & milieu) */
  --gold:        #B6893F;  /* fluistertje messing, spaarzaam */

  /* --- Semantic roles --- */
  --bg: var(--cream);
  --primary: var(--terracotta);
  --primary-strong: var(--terracotta-strong);
  --secondary: var(--plum);

  /* --- Typography --- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Switzer", "Inter", system-ui, -apple-system, sans-serif;
  --step--1: 0.833rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: 2.35rem;
  --step-4: 3.4rem;

  /* --- Space & shape (rond & vriendelijk, geen harde hoeken) --- */
  --space: 8px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  /* organische, asymmetrische vormen — speels, niet "AI-blokken" */
  --blob-1: 62% 38% 55% 45% / 55% 48% 52% 45%;
  --blob-2: 42% 58% 46% 54% / 60% 42% 58% 40%;
  --leaf: 26px 26px 26px 6px;

  --line-h: 1px solid var(--line);
  --container: 1200px;
  --gutter: clamp(24px, 5vw, 40px); /* horizontale marge — comfortabel op mobiel, ademt op desktop */
  --shadow-sm: 0 6px 18px -12px rgba(51, 32, 16, .40);
  --shadow: 0 20px 44px -26px rgba(51, 32, 16, .50);
  --shadow-lift: 0 28px 60px -30px rgba(51, 32, 16, .55);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}