/**
 * Westwood design tokens — "Quiet Premium Utility".
 * Eén bron voor kleur, typografie, spacing, layout, radius en beweging.
 * De theme.json-presets (--wp--preset--*) dragen dezelfde waarden voor
 * content-side klassen; nieuw CSS gebruikt de --ww-*-tokens hieronder.
 */

:root {
  /* ── kleur ── */
  --ww-cream: #F3F0E8;        /* primair canvas                          */
  --ww-paper: #FBFAF7;        /* kaarten & inhoudelijke vlakken          */
  --ww-wit: #FFFFFF;          /* packshot-vlakken, formuliervelden       */
  --ww-ink: #171A17;          /* typografie                              */
  --ww-forest: #213C33;       /* merk & CTA                              */
  --ww-forest-donker: #162A24;/* hover/pressed op forest                 */
  --ww-clay: #B76B4D;         /* accent — alléén grafisch                */
  --ww-clay-tekst: #8F4A2E;   /* clay als tekst (AA op cream)            */
  --ww-sage: #CED8D0;         /* zeer spaarzame zachte tint              */
  --ww-cream-diep: #EAE6DB;   /* verdiepte cream (banden, chips)         */
  --ww-gedempt: #5F635E;      /* secundaire tekst                        */
  --ww-lijn: #DCD9D1;         /* hairlines                               */
  --ww-lijn-sterk: #C6C2B6;   /* hairline met meer nadruk (inputs)       */
  --ww-licht: #F1EFE7;        /* tekst/vlakken op forest                 */
  --ww-licht-gedempt: #C6D0C9;/* secundaire tekst op forest              */
  --ww-succes: #276447;       /* voorraad, leverbelofte, meldingen       */
  --ww-fout: #A63F32;         /* fouten, saleprijs                       */
  --ww-ster: #C9922E;         /* reviewsterren (grafisch)                */

  /* ── typografie ── */
  --ww-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ww-sans: Manrope, "Segoe UI", system-ui, sans-serif;

  --ww-text-xs: 0.75rem;
  --ww-text-sm: 0.875rem;
  --ww-text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --ww-text-lg: 1.125rem;
  --ww-text-xl: 1.375rem;

  --ww-kop-sm: clamp(1.5rem, 2vw, 2rem);       /* Manrope 700 — UI-koppen  */
  --ww-kop-md: clamp(1.9rem, 3.5vw, 2.75rem);  /* serif — sectiekoppen     */
  --ww-kop-lg: clamp(2.1rem, 4vw, 3.4rem);     /* serif — paginakoppen     */
  --ww-kop-hero: clamp(2.75rem, 6vw, 4.75rem); /* serif — homepage-hero    */

  /* ── spacing ── */
  --ww-s1: 4px;  --ww-s2: 8px;   --ww-s3: 12px; --ww-s4: 16px; --ww-s5: 24px;
  --ww-s6: 32px; --ww-s7: 48px;  --ww-s8: 64px; --ww-s9: 96px; --ww-s10: 128px;
  --ww-sectie: clamp(56px, 9vw, 128px);        /* verticaal sectieritme    */
  --ww-sectie-kl: clamp(36px, 6vw, 72px);      /* compacte sectie          */

  /* ── layout ── */
  --ww-breed: 1440px;
  --ww-standaard: 1280px;
  --ww-lees: 760px;

  /* ── vorm ── */
  --ww-r-sm: 4px; --ww-r-md: 8px; --ww-r-lg: 14px;

  /* ── schaduw (extreem terughoudend) ── */
  --ww-schaduw-1: 0 1px 2px rgba(23, 26, 23, 0.05);
  --ww-schaduw-2: 0 12px 32px -16px rgba(23, 26, 23, 0.16); /* drawer/overlay/toast */

  /* ── beweging ── */
  --ww-overgang: 0.15s ease;
  --ww-overgang-traag: 0.25s ease;
}