/* ── tokens ──────────────────────────────────────────────────────────────
   Zetgoed design tokens: front-end bron van waarheid, 1-op-1 gesynchroniseerd
   met theme.json. Wijzig een waarde hier én daar; nooit los van elkaar. */

/* Webfonts.
   Display: Young Serif — self-hosted brand display serif voor headings.
   Body: Gina — self-hosted brand body-face (Light/Regular/Bold). */
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/youngserif-regular.woff') format('woff');
}

@font-face {
  font-family: Gina;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/Gina-Light.woff2') format('woff2');
}

@font-face {
  font-family: Gina;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Gina-Regular.woff2') format('woff2');
}

@font-face {
  font-family: Gina;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Gina-Bold.woff2') format('woff2');
}

:root {
  /* ── Kleur — Paper / warme neutralen (achtergronden & surfaces) ── */
  --paper-50: #fcf8ef; /* lichtste crème — verhoogde kaarten */
  --paper-100: #faf4e8; /* kaart-crème */
  --paper-200: #f3ead8; /* app-achtergrond */
  --paper-300: #ece0c8; /* subtiele inzet */

  /* Stone / greige (neutrale, niet-warme surfaces)
     `#e2dcd2` is een bron-letterlijke uit ProductReview.dc.html (het
     "De machine kort"-paneel) en Vergelijker.dc.html (de kies-kaart). Het
     palet had geen enkele token in die buurt: de dichtstbijzijnde was
     `--forest-100` op afstand 13,6 (verkeerde tint, groenig) en
     `--paper-300` op 14,7. Beide plekken zijn daarom eerder op `--sand-100`
     (afstand 17,9) gemapt, wat ze zichtbaar te warm en te geel maakte. */
  --stone-100: #e2dcd2;

  /* Sand / tan (secundaire surfaces, hero-blokken, footer) */
  --sand-100: #eadcc2;
  --sand-200: #e5d5b8;
  --sand-300: #dfcba6;
  --sand-400: #d8bf93;

  /* Espresso / warme inkt (tekst + donkerste merktoon) */
  --espresso-900: #322a22; /* headings, bijna-zwart warm bruin */
  --espresso-800: #3b322a; /* body-inkt */
  --espresso-700: #574b3d; /* sterke secundaire tekst */
  --espresso-500: #7a6e5e; /* gedempt / captions */
  --espresso-400: #9b8e7b; /* placeholder, disabled-inkt */

  /* Forest green (primair accent) */
  --forest-700: #3c4a34; /* pressed */
  --forest-600: #47573f; /* primair */
  --forest-500: #556647; /* hover-lighten alt */
  --forest-200: #c9d2cb; /* sage — badge/soft fills */
  --forest-100: #dce3dc; /* zachtste sage-tint */

  /* Warme functionele tinten (afgeleid, blijven binnen het palet) */
  --terracotta-600: #b0552e; /* danger / error */
  --terracotta-700: #8c4324; /* pressed/hover — terracotta als interactief accent (review-archive: "Lees review →"/"Wis alles"), 1-op-1 uit ReviewOverzicht.dc.html */
  --terracotta-100: #f1ddd0;
  --amber-600: #c1852b; /* warning / honing */
  --amber-100: #f3e6c9;
  --sage-600: #5c7360; /* success (blad) */
  --sage-100: #dce7dc;

  /* Haarlijnen & randen */
  --line-strong: #cdbd9c; /* input / control-randen */
  --line: #decfb2; /* kaart- & divider-haarlijn */
  --line-soft: #e7dbc2; /* vage inzet-divider */

  /* ── Semantische aliassen ── */
  --bg: var(--paper-50);
  --bg-inset: var(--paper-300);
  --surface: var(--paper-100);
  --surface-raised: var(--paper-50);
  --surface-sand: var(--sand-200);
  --surface-sand-deep: var(--sand-300);
  --text: #4b3e3b;
  --text-heading: #4b3e3b;
  --text-muted: var(--espresso-500);
  --text-subtle: var(--espresso-700);
  --text-placeholder: var(--espresso-400);
  --text-on-forest: var(--paper-50);
  --accent: var(--forest-600);
  --accent-hover: var(--forest-500);
  --accent-press: var(--forest-700);
  --accent-soft: var(--forest-200);
  --border: var(--line);
  --border-control: var(--line-strong);
  --divider: var(--line-soft);
  --focus-ring: color-mix(in oklab, var(--forest-600) 45%, transparent);
  --success: var(--sage-600);
  --success-soft: var(--sage-100);
  --warning: var(--amber-600);
  --warning-soft: var(--amber-100);
  --danger: var(--terracotta-600);
  --danger-soft: var(--terracotta-100);

  /* Linkkleuren (standaard + hover) */
  --link: var(--forest-600);
  --link-hover: var(--forest-700);

  /* ── Typografie ──
     Display serif = Young Serif (warm, zachte terminals). Body/UI = Gina. */
  --font-display: 'Young Serif', 'Hoefler Text', georgia, serif;
  --font-body: 'Gina', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* Optische/variatie-defaults (voor display fine-tuning) */
  --display-vsettings: 'opsz' 120, 'SOFT' 40, 'WONK' 0; /* @kind font */

  /* Typeschaal (px) */
  --fs-display: 4rem; /* 64 — hero */
  --fs-h1: 3rem; /* 48 */
  --fs-h2: 2.125rem; /* 34 */
  --fs-h3: 1.5rem; /* 24 */
  --fs-h4: 1.25rem; /* 20 */
  --fs-lead: 1.125rem; /* 18 — lead-alinea */
  --fs-body: 1.125rem; /* 18 */
  --fs-md: 1rem; /* 16 - tussenstap tussen --fs-sm en --fs-body */
  --fs-sm: 0.875rem; /* 14 */
  --fs-xs: 0.8125rem; /* 13 — eyebrow / meta */

  /* Regelhoogtes */
  --lh-tight: 1.08; /* @kind font */
  --lh-heading: 1.15; /* @kind font */
  --lh-snug: 1.35; /* @kind font */
  --lh-body: 1.6; /* @kind font */

  /* Gewichten */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* Tracking */
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-eyebrow: 0.14em;

  /* ── Spacing, radius, shadow ──
     Ruimhartig, rustig ritme. Basiseenheid 4px. */
  --space-1: 0.25rem; /* 4 */
  --space-2: 0.5rem; /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem; /* 16 */
  --space-5: 1.25rem; /* 20 */
  --space-6: 1.5rem; /* 24 */
  --space-8: 2rem; /* 32 */
  --space-10: 2.5rem; /* 40 */
  --space-12: 3rem; /* 48 */
  --space-16: 4rem; /* 64 */
  --space-20: 5rem; /* 80 */
  --space-30: 7.5rem; /* 120 */

  /* Standaard verticaal ritme tussen grote paginasecties op desktop.
     Bewust strakker dan de design-bron (was 7.5rem/120): de opgestapelde
     band-marges + eigen padding lieten de homepage te luchtig ogen. */
  --section-y: 6.75rem; /* 108 */

  /* Radii — zacht, afgerond merk. Controls ~pill, surfaces ruimhartig. */
  --radius-xs: 6px;
  --radius-sm: 10px; /* inputs, kleine chips */
  --radius-md: 14px; /* buttons (non-pill), selects */
  --radius-lg: 20px; /* cards */
  --radius-xl: 28px; /* grote panelen */
  --radius-2xl: 36px; /* hero-containers */
  --radius-pill: 999px; /* buttons, badges */

  /* Shadows — zeer zacht & warm; het merk leunt op tonale gelaagdheid, niet op zware shadow */
  --shadow-xs: 0 1px 2px rgb(58 46 32 / 5%);
  --shadow-sm: 0 2px 8px rgb(58 46 32 / 6%);
  --shadow-md: 0 8px 24px rgb(58 46 32 / 8%);
  --shadow-lg: 0 20px 48px rgb(58 46 32 / 10%);

  /* Focus-ring breedte */
  --ring-width: 3px;
}

/* ── Mobiel: compactere verticale sectie-ritmiek ────────────────────────
   Desktop --section-y = 6.75rem (108px). Op mobiel schaalt de bron
   (Homepage.dc.html .zg-root) terug naar 5rem (≤960) en 2.5rem (≤640).
   Globaal (:root) zodat elke sectie + full-bleed band meeschaalt. */
@media (width <= 960px) {
  :root {
    --section-y: 5rem; /* 80 */
  }
}

@media (width <= 640px) {
  :root {
    --section-y: 2.5rem; /* 40 */
  }
}