/* Apokruid Vitaal design system. Kleuren komen uit het logo: het donkerblauwe
   woordmerk, het lichtere blauw van VITAAL, het bladgroen en de oranje boog.
   De tokennamen zijn geërfd van de Nestell-basis (terracotta = de actiekleur,
   plum = de merkkleur); de waarden zijn van Apokruid. Nooit kleur, maat of
   letter hard in een component zetten: altijd hier vandaan. */
:root {
  /* --- Palet --- */
  --terracotta:        #2E7D32;  /* actiekleur: knoppen, prijs. Bladgroen, wit erop haalt 5,1:1 */
  --terracotta-strong: #1F5E23;  /* hover/active */
  --terracotta-soft:   #A8D08D;  /* zachte tint, randen */
  --terracotta-wash:   #EDF6E7;  /* zeer lichte groene achtergrond */

  --plum:        #173F66;  /* merkkleur: het blauw van het woordmerk. Koppen, footer */
  --plum-soft:   #2A6A9E;  /* het blauw van VITAAL: links, hover */
  --plum-wash:   #EAF2F9;  /* lichte blauwe achtergrond */

  --cream:       #FFFFFF;  /* achtergrond: schoon wit, zoals het etiket */
  --cream-deep:  #F3F7F4;  /* sectie-achtergrond met een zweem groen */
  --surface:     #FFFFFF;  /* kaarten */
  --ink:         #1B2730;  /* leestekst, bijna zwart voor maximaal contrast */
  --muted:       #4F5D68;  /* secundaire tekst, nog steeds 7:1 op wit */
  --line:        #D9E3DD;  /* randen en scheidingen */

  --sage:        #3E8E2F;  /* voorraad, "gelukt" */
  --gold:        #E8901A;  /* de oranje boog uit het logo, spaarzaam */

  --sale:        #C62828;
  --promo:        #FFE7B8;
  --promo-strong: #E8901A;
  --promo-ink:    #4A2A00;

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

  /* --- Typografie ---
     Koppen in Montserrat, dezelfde geometrische vorm als het woordmerk.
     Lopende tekst in Source Sans 3: rustig, open en goed leesbaar op kleine
     schermen. (Atkinson Hyperlegible is geprobeerd, maar die zet een streep
     door de nul en dat leest bij prijzen als een fout.) De basismaat ligt op
     18px: de doelgroep is 60-plus. */
  --font-display: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --step--1: 0.92rem;
  --step-0: 1.125rem;
  --step-1: 1.3rem;
  --step-2: 1.65rem;
  --step-3: clamp(1.85rem, 6vw, 2.4rem);
  --step-4: 3.1rem;

  /* --- Ruimte en vorm: rustig en duidelijk, zachte hoeken --- */
  --space: 8px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --blob-1: 50%;
  --blob-2: 24px;
  --leaf: 20px;

  --line-h: 1px solid var(--line);
  --container: 1180px;
  --gutter: clamp(20px, 5.5vw, 40px);
  --icon-inset: 4px;
  --shadow-sm: 0 4px 14px -8px rgba(23, 63, 102, .28);
  --shadow: 0 16px 36px -22px rgba(23, 63, 102, .40);
  --shadow-lift: 0 24px 50px -26px rgba(23, 63, 102, .45);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-xs: .1s;
  --dur-sm: .14s;
  --dur-md: .18s;
  --dur-lg: .26s;
  --dur-page: .16s;
}