/* Tokens Ares Flow eigen website
 *
 * Gegenereerd door bouw-tokens.js uit theme.md, thema van 2026-08-12.
 * Niet met de hand wijzigen. Pas het thema aan en draai het script opnieuw,
 * anders lopen het thema en deze CSS uit elkaar.
 */

:root {
  /* laag 1 — palet. De enige plek met een letterlijke kleurwaarde. */
  --olive:               #5A7A00;
  --olive-deep:          #2E3D00;
  --lime:                #C8F135;
  --lime-deep:           #B4DB25;
  --cream:               #F8F7F4;
  --white:               #FFFFFF;
  --line:                #DCD9D0;
  --ink-line:            #7D7A6F;
  --ink:                 #1A1A1A;
  --ink-soft:            #5F5F58;
  --red-error:           #A8322B;
  --red-competitor:      #A8321C;
  --gold-rating:         #B8770E;
  --green-success:       #2F6B3D;
  --overlay-ink:         rgba(26, 26, 26, 0.55);

  /* laag 2 — rollen. Een component roept uitsluitend deze aan. */
  --color-bg:            var(--cream);                     /* standaard body */
  --color-bg-alt:        var(--white);                     /* rustige afwisseling tussen creamvlakken */
  --color-bg-inverse:    var(--olive-deep);                /* hero en footer */
  --color-text-inverse:  var(--cream);                     /* tekst op het donkere olijfvlak */
  --color-surface:       var(--white);                     /* kaarten, altijd met zichtbare rand */
  --color-border:        var(--line);                      /* 1 pixel, verplicht op witte kaarten */
  --color-border-input:  var(--ink-line);                  /* rand van een invoerveld, moet 3:1 halen */
  --color-text:          var(--ink);                       /* alle lopende tekst */
  --color-text-subtle:   var(--ink-soft);                  /* bijschriften en metadata */
  --color-accent:        var(--olive);                     /* lijnen, iconen, decoratie */
  --color-accent-text:   var(--olive);                     /* koppen en uitgelichte tekst */
  --color-action:        var(--lime);                      /* primaire knop */
  --color-action-hover:  var(--lime-deep);                 /* idem, bij hover */
  --color-on-action:     var(--ink);                       /* tekst op de knop, bijna-zwart en niet wit */
  --color-focus:         var(--olive);                     /* focusring */
  --color-error:         var(--red-error);                 /* uitsluitend validatie, altijd met tekstlabel */
  --color-competitor:    var(--red-competitor);            /* de concurrent in de zoekdemo, nooit voor een fout */
  --color-rating:        var(--gold-rating);               /* sterren in de zoekdemo, decoratief naast een cijfer */
  --color-on-error:      var(--white);                     /* tekst op een foutvlak */
  --color-success:       var(--green-success);             /* bevestiging, altijd met tekst en icoon */
  --color-overlay:       var(--overlay-ink);               /* achter het mobiele menu */

  /* tekengrootte, stap 0 is lopende tekst */
  --fs--2:               clamp(0.64rem, 0.631rem + 0.0386vw, 0.666rem);
  --fs--1:               clamp(0.8rem, 0.777rem + 0.0982vw, 0.865rem);
  --fs-0:                clamp(1rem, 0.956rem + 0.1878vw, 1.125rem);
  --fs-1:                clamp(1.25rem, 1.175rem + 0.3192vw, 1.463rem);
  --fs-2:                clamp(1.563rem, 1.443rem + 0.5089vw, 1.901rem);
  --fs-3:                clamp(1.953rem, 1.771rem + 0.779vw, 2.472rem);
  --fs-4:                clamp(2.441rem, 2.17rem + 1.1594vw, 3.213rem);
  --fs-5:                clamp(3.052rem, 2.656rem + 1.6906vw, 4.177rem);

  /* ruimte, stap 0 is de basiseenheid */
  --sp-0:                clamp(10px, 9.3px + 0.1878vw, 12px);
  --sp-1:                clamp(16px, 14.5px + 0.4131vw, 20.4px);
  --sp-2:                clamp(25.6px, 22.4px + 0.8526vw, 34.7px);
  --sp-3:                clamp(41px, 34.6px + 1.6898vw, 59px);
  --sp-4:                clamp(65.5px, 53.3px + 3.2572vw, 100.2px);

  /* container. Elke sectie plaatst zijn inhoud hierin; een sectie heeft zelf
     nooit padding-inline of een eigen max-width. */
  --container-max:       1200px;
  --container-pad:       24px;
  --leeskolom-max:       68ch;

  /* merkkleuren van derden. Vast, niet uit het thema, want ze horen bij een
     ander merk. Ze worden niet getoetst tegen de projectkleuren, maar wel
     tegen hun eigen tekstkleur, en daar ging het mis.

     De bekende WhatsApp-knop is wit op #25d366 en haalt 1,98:1. Dat is de
     combinatie die overal gebruikt wordt en die niemand leest zolang het
     logo herkenbaar is, maar op een knop met tekst valt hij door de mand.
     WhatsApp voert zelf een tweede merkkleur, #075e54, en daarop haalt wit
     7,67:1. Het vlak draagt daarom de donkere merkkleur en het icoon houdt
     het lichte groen. Gevonden door Codex op 12 augustus 2026. */
  --brand-whatsapp:       #075e54;
  --brand-whatsapp-hover: #054840;
  --brand-whatsapp-text:  #ffffff;
  --brand-whatsapp-icoon: #25d366;

  /* regelhoogtes, vast over alle projecten */
  --lh-flat:              1;
  --lh-tight:             1.15;
  --lh-snug:              1.3;
  --lh-body:              1.5;
  --lh-prose:             1.65;

  /* laag 3 — toegepaste stijlen. Een component schrijft font: var(--type-h2)
     en kiest zelf geen grootte, gewicht of regelhoogte meer. */
  --type-display:        800 var(--fs-5)/var(--lh-flat) var(--font-heading);
  --type-h1:             700 var(--fs-4)/var(--lh-tight) var(--font-heading);
  --type-h2:             700 var(--fs-3)/var(--lh-tight) var(--font-heading);
  --type-h3:             600 var(--fs-2)/var(--lh-snug) var(--font-heading);
  --type-lead:           400 var(--fs-1)/var(--lh-body) var(--font-body);
  --type-body:           400 var(--fs-0)/var(--lh-prose) var(--font-body);
  --type-body-sm:        400 var(--fs--1)/var(--lh-body) var(--font-body);
  --type-label:          600 var(--fs--1)/var(--lh-snug) var(--font-body);
  --type-eyebrow:        700 var(--fs--2)/var(--lh-snug) var(--font-body);
  --type-caption:        400 var(--fs--2)/var(--lh-body) var(--font-body);
}

/* De container zelf. Eén klasse, door elke sectie gebruikt. Staat hier en niet
   in de projectstijl, omdat een sectie met eigen buitenmarges de bron is van
   uitlijningsverschillen die pas bij uitzoomen zichtbaar worden. */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Lopende tekst blijft leesbaar, ook als de container breed is. */
.leeskolom { max-width: var(--leeskolom-max); }