/* GEGENEREERD door bron/tools/build_tokens.py uit
   bron/content/ontwerpsysteem.json. Niet met de hand wijzigen:
   pas het ontwerpsysteem aan en draai het script opnieuw. */
:root {

  /* kleur */
  --fe-inkt: #293038;  /* donkere vlakken en de kleur van h2 */
  --fe-kop: #333333;  /* h1, h3 en h4 */
  --fe-tekst: #595959;  /* lopende tekst */
  --fe-olijf: #848366;  /* merkkleur, decoratief: iconen, randen, lijnen, grote koppen */
  --fe-olijf-tekst: #686750;  /* links en kleine tekst in de merkkleur */
  --fe-actie: #C94E2F;  /* knoppen en de primaire tegel */
  --fe-warmgrijs: #E6E3DE;  /* afwisselende secties */
  --fe-salie: #B5C1BB;  /* topbalk */
  --fe-papier: #FCFCFC;  /* tekst op donker */
  --fe-wit: #FFFFFF;  /* standaard sectie, kaarten, formulierpanelen */
  --fe-fout: #8F2B22;  /* foutmeldingen */
  --fe-route-groen: #4C6B4F;  /* de groene wandelroute op de bospagina; een bosgroen dat naast olijf staat */
  --fe-route-roze: #A8566A;  /* de roze wandelroute; gedempt, zodat hij naast terracotta kan staan */
  --fe-whatsapp: #25D366;  /* merkkleur van WhatsApp, alleen voor de WhatsApp-knop */

  /* typografie: lettertypen */
  --fe-font-kop: "Raleway", system-ui, sans-serif;
  --fe-font-tekst: "Open Sans", system-ui, sans-serif;

  /* typografie: de trap. Voorvoegsel ts, zodat een maat nooit botst met een kleur */
  --fe-ts-h1: clamp(30px, 1.71vw + 23.3px, 48px);
  --fe-ts-h1-regel: 1.15;
  --fe-ts-h2: clamp(26px, 0.76vw + 23px, 34px);
  --fe-ts-h2-regel: 1.2;
  --fe-ts-h3: clamp(21px, 0.29vw + 19.9px, 24px);
  --fe-ts-h3-regel: 1.3;
  --fe-ts-h4: clamp(18px, 0.10vw + 17.6px, 19px);
  --fe-ts-h4-regel: 1.35;
  --fe-ts-intro: clamp(18px, 0.19vw + 17.3px, 20px);
  --fe-ts-intro-regel: 1.55;
  --fe-ts-tekst: 16px;
  --fe-ts-tekst-regel: 1.7;
  --fe-ts-klein: 14px;
  --fe-ts-klein-regel: 1.55;
  --fe-ts-label: 13px;

  /* typografie: componenten */
  --fe-ts-menu: 14px;
  --fe-ts-tegeltitel: 18px;
  --fe-ts-tegelonderregel: 14px;
  --fe-ts-mobiele_balk: 15px;

  /* ruimte: een schaal van negen waarden */
  --fe-ruimte-4: 4px;
  --fe-ruimte-8: 8px;
  --fe-ruimte-12: 12px;
  --fe-ruimte-16: 16px;
  --fe-ruimte-20: 20px;
  --fe-ruimte-24: 24px;
  --fe-ruimte-32: 32px;
  --fe-ruimte-48: 48px;
  --fe-ruimte-64: 64px;
  --fe-ruimte-96: 96px;

  /* ruimte: het ritme binnen een sectie (25-10-2026) */
  --fe-ritme-boven-kop: 48px;
  --fe-ritme-kop-blok: 24px;
  --fe-ritme-kop-tekst: 16px;
  --fe-ritme-alinea: 20px;
  --fe-ritme-blok: 32px;
  --fe-ritme-kaart: 20px;
  --fe-ritme-kaarten: 16px;

  /* ruimte: secties en containers */
  --fe-sectie: 64px;
  --fe-sectie-compact: 48px;
  --fe-zijmarge: 20px;
  --fe-inhoud: 1080px;
  --fe-balk: 1280px;
  --fe-tekstkolom: 66ch;

  /* vorm */
  --fe-rond-vlak: 12px;
  --fe-rond-knop: 999px;
  --fe-kaartrand: 0.5px solid rgba(41,48,56,0.16);

  /* knoppen en velden */
  --fe-knop-hoog: 56px;
  --fe-knop-hoog-2: 48px;
  --fe-raak: 44px;
  --fe-veld-hoog: 48px;
  --fe-veldrand: 1px solid rgba(41,48,56,0.24);
  --fe-veldring: 3px rgba(201,78,47,0.20);
  --fe-herokaart-vlak: rgba(255,255,255,0.82);
  --fe-herokaart-waas: 2px;

  /* hero */
  --fe-hero-verloop: linear-gradient(90deg, rgba(25,30,20,.22) 0%, rgba(25,30,20,.10) 55%, rgba(25,30,20,0) 100%);
  --fe-hero-verloop-mobiel: linear-gradient(0deg, rgba(20,20,20,.28) 0%, rgba(20,20,20,.18) calc(100% - var(--fe-sectie)), rgba(20,20,20,0) 100%);
  --fe-heropaneel: rgba(252,252,252,0.92);
  --fe-heropaneel-waas: 6px;
  --fe-heropaneel-zacht: 0.58;
  --fe-heropaneel-zacht-waas: 2px;

  /* lightbox */
  --fe-lightbox-pijl: 88px;
  --fe-lightbox-pijl-mobiel: 56px;
  --fe-lightbox-duim: 72px;
  --fe-lightbox-beeld: 66vh;
}

/* op desktop meer lucht tussen de secties */
@media (min-width: 1024px) {
  :root {
    --fe-sectie: 96px;
    --fe-sectie-compact: 64px;
    --fe-zijmarge: 32px;
    --fe-ritme-boven-kop: 64px;
    --fe-ritme-blok: 48px;
    --fe-ritme-kaart: 24px;
    --fe-ritme-kaarten: 20px;
  }
}