/*
 * Design Tokens — Wietzadenshop
 * ----------------------------------------
 * Overgenomen uit het prototype: docs/design/wietzadenshop-home.html
 * Refereer in componenten altijd naar var(--...).
 *
 * De site heeft een DONKERE basis met LICHTE secties (Alle zaden, Keuzehulp,
 * SEO/FAQ). Elke kleurrol bestaat daarom twee keer: de donkere variant en de
 * -lite variant. Zie de .lite-modifier in components.css.
 */

:root {

  /* ============================================
   * KLEUREN — merk
   * ============================================ */

  --color-primary:        #26a65c;   /* Huisstijlgroen, identiek aan het logo */
  --color-primary-hover:  #31c06f;   /* Feller, bij hover */
  --color-primary-dark:   #1b8248;   /* Donkerder, voor gebruik op lichte vlakken */
  --color-on-primary:     #05130a;   /* Tekst op groen (knoppen, badges) */
  --color-on-primary-soft: #0d2716;  /* Gedempte tekst op groen */

  --color-amber:          #f4c04e;   /* Sterren / rating */

  /* ============================================
   * KLEUREN — donkere basis
   * ============================================ */

  --color-bg:             #0c0e0b;
  --color-bg-alt:         #12150f;   /* Banden en panelen */
  --color-card:           #171a13;

  --color-text:           #f4f5ef;
  --color-text-muted:     rgba(244, 245, 240, 0.58);
  --color-text-faint:     rgba(244, 245, 240, 0.40);

  --color-line:           rgba(244, 245, 240, 0.11);
  --color-line-strong:    rgba(244, 245, 240, 0.18);

  /* ============================================
   * KLEUREN — lichte secties
   * ============================================ */

  --color-bg-lite:            #f2f2ec;
  --color-card-lite:          #ffffff;

  --color-text-lite:          #14150f;
  --color-text-muted-lite:    #5b5e52;
  --color-text-subtle-lite:   #7c7e70;   /* Spec-labels op de productkaart */
  --color-text-faint-lite:    #9a9b8d;

  --color-line-lite:          #e6e6dd;
  --color-line-strong-lite:   #dbdbd1;
  --color-line-hover-lite:    #d2d2c6;
  --color-line-soft-lite:     #e2e2d8;   /* Randen van keuzehulp-antwoorden */

  --color-surface-lite:       #f7f7f2;   /* Vlak binnen een lichte kaart */
  --color-text-soft-lite:     #6b6d60;   /* Toelichting onder een antwoord */
  --color-primary-soft:       #e9f3ec;   /* Groene chip-achtergrond (recap) */

  /* ============================================
   * TYPOGRAFIE
   * ============================================ */

  --font-heading:    'Archivo', sans-serif;
  --font-body:       'Inter', system-ui, -apple-system, sans-serif;

  /* Weights — Archivo 500-900, Inter 400-600 */
  --font-regular:    400;
  --font-medium:     500;
  --font-semibold:   600;
  --font-bold:       700;
  --font-extrabold:  800;
  --font-black:      900;

  /* Sizes */
  --text-2xs:    10px;
  --text-xs:     12px;
  --text-sm:     14px;
  --text-base:   16px;
  --text-md:     18px;   /* Introteksten (hero, fotoband) */
  --text-lg:     19px;   /* Productkaart: titel en prijs */
  --text-xl:     22px;
  --text-2xl:    28px;
  --text-3xl:    36px;
  --text-4xl:    48px;
  --text-5xl:    58px;

  /* Vloeiende koppen, zoals in het prototype */
  --text-section:   clamp(32px, 4.6vw, 58px);   /* .sec-head h2 */
  --text-display:   clamp(34px, 6vw, 54px);     /* hero / gate */

  /* Line heights */
  --leading-none:     0.95;
  --leading-tight:    1.2;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;

  /* Letter spacing */
  --tracking-tight:   -0.02em;  /* Koppen */
  --tracking-normal:  0;
  --tracking-wide:    0.02em;   /* Knoppen, chips */
  --tracking-wider:   0.04em;   /* Announce-balk */
  --tracking-caps:    0.05em;   /* Spec-labels */
  --tracking-badge:   0.10em;   /* Badges */
  --tracking-eyebrow: 0.24em;   /* Eyebrow boven koppen */

  /* ============================================
   * SPACING — 4px schaal
   * ============================================ */

  --space-1:     4px;
  --space-2:     8px;
  --space-3:     12px;
  --space-4:     16px;
  --space-5:     20px;
  --space-6:     24px;
  --space-8:     32px;
  --space-10:    40px;
  --space-11:    44px;
  --space-12:    48px;
  --space-16:    64px;
  --space-20:    80px;
  --space-24:    96px;
  --space-32:    128px;

  /* ============================================
   * LAYOUT
   * ============================================ */

  --container-max:      1320px;
  --gutter:             40px;
  --section-padding-y:  110px;
  --grid-gap:           18px;

  /* Ruimte tussen label en pijl in een knop — valt buiten de 4px-schaal. */
  --btn-gap:            10px;

  /* ============================================
   * EFFECTEN
   * ============================================ */

  --shadow-card-lite:  0 34px 70px -36px rgba(20, 21, 15, 0.32);

  --radius-none:  0;
  --radius-xs:    2px;    /* Meter-balkjes */
  --radius-badge: 3px;
  --radius-sm:    4px;    /* Knoppen */
  --radius-md:    6px;    /* Aantal-stepper */
  --radius-input: 8px;    /* Formuliervelden, paginering */
  --radius-card:  10px;
  --radius-panel: 14px;   /* Overzichtskaart, productgalerij */
  --radius-band:  16px;   /* Keuzehulp-band in de shoppagina */
  --radius-full:  100px;  /* Filterchips */

  --transition-fast: 0.18s ease-in-out;
  --transition-base: 0.25s ease-in-out;
  --transition-slow: 0.55s ease-in-out;   /* Hover-zoom op productfoto's */
}

/* Sectiepadding krimpt op tablet en kleiner. */
@media (max-width: 960px) {
  :root {
    --section-padding-y: 74px;
  }
}

/* Gutter krimpt op mobiel. */
@media (max-width: 560px) {
  :root {
    --gutter: 22px;
  }
}