/* Nestell design system — single source of truth.
   Warm & tactile: terracotta + plum on a soft cream base.
   Never hardcode colour/space/type in components; pull from here. */
:root {
  /* --- Brand palette --- */
  --terracotta:        #C85A32;  /* primair — CTA, banners, uitgelichte prijzen */
  --terracotta-strong: #A8481F;  /* hover/active */
  --terracotta-soft:   #E7B79F;  /* zachte tint, borders/wash */
  --terracotta-wash:   #F3E2D6;  /* zeer lichte achtergrondwash */

  --plum:        #4A2C40;  /* secundair — footer, iconen, kaders */
  --plum-soft:   #6E4A62;  /* hover/secundaire tekst */
  --plum-wash:   #EDE3E9;  /* lichte plum achtergrond */

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

  --sage:        #7C8B6F;  /* rustaccent voor voorraad/"gelukt" */
  --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;
  --shadow-sm: 0 6px 18px -12px rgba(74, 44, 64, .40);
  --shadow: 0 20px 44px -26px rgba(74, 44, 64, .50);
  --shadow-lift: 0 28px 60px -30px rgba(74, 44, 64, .55);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}