/* bio-grond — design tokens
   Bron: kickoff + design-addendum 04-07-2026.
   Merkkleuren liggen vast. De definitieve grond-tint (bruin vs antraciet)
   kiest Mark vdH later: omschakelen = alleen de --color-grond-alias wijzigen.
   Besluitlog: design/TOKENS.md */

:root {
  /* ── Merk (vast) ─────────────────────────────────────────────── */
  --color-bio:             #4C8C2A; /* groen — levend, biologisch actief */
  --color-grond-bruin:     #6B4A2B; /* aardebruin (≈ Mudtrap-bruin) */
  --color-grond-antraciet: #1A222B;

  /* Omschakelpunt grond-tint — open besluit Mark vdH */
  --color-grond: var(--color-grond-antraciet);

  /* ── Afgeleiden ──────────────────────────────────────────────── */
  /* Donkere bio-variant voor tekst/links op licht (contrast ≥ 4.5:1);
     het merkgroen zelf is voor vlakken, iconen en grote koppen. */
  --color-bio-diep:        #3A6B1F;

  /* Functioneel (geen merkkleur): foutmeldingen formulieren */
  --color-error:           #B3261E;

  /* Neutrals op de warme bruin-as */
  --color-ink:             #201B16; /* primaire tekst */
  --color-ink-zacht:       #55503F; /* secundaire tekst, 60% gevoel */
  --color-surface:         #FCFBF8; /* pagina-achtergrond, warm off-white */
  --color-surface-alt:     #F3EFE6; /* sectie-afwisseling, licht zand */
  --color-line:            #E3DDD1; /* hairlines, borders */
  --color-wit:             #FFFFFF;

  /* Semantische aliassen — gebruik dézen in componenten */
  --color-primary:         var(--color-bio);
  --color-primary-text:    var(--color-bio-diep);
  --color-on-primary:      var(--color-wit);
  --color-on-grond:        var(--color-wit);

  /* ── Typografie ──────────────────────────────────────────────── */
  /* Inter (variable, self-hosted) — voorlopige keuze; definitief na
     woordmerk-conceptsheet. Alles hangt aan deze twee tokens. */
  --font-sans: "InterVariable", ui-sans-serif, system-ui, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);

  /* Fluïde schaal — grote editorial koppen, rustige romp */
  --text-sm:   0.875rem;
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-h3:   clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --text-h2:   clamp(1.625rem, 1.3rem + 1.5vw, 2.375rem);
  --text-h1:   clamp(2.25rem, 1.5rem + 3.5vw, 3.75rem);

  --leading-body:  1.6;
  --leading-kop:   1.12;
  --tracking-kop:  -0.02em;
  --weight-body:   400;
  --weight-medium: 550;   /* variable-font tussengewicht */
  --weight-kop:    700;

  /* ── Layout & ruimte ─────────────────────────────────────────── */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-s:   0.75rem;
  --space-m:   1rem;
  --space-l:   1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --measure:   65ch;      /* max regelbreedte lopende tekst */
  --container: 72rem;
  --container-pad: clamp(1rem, 4vw, 2rem);

  --radius-s:    6px;
  --radius-m:    12px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgb(32 27 22 / 0.06), 0 4px 16px rgb(32 27 22 / 0.07);

  /* ── Motion (zie addendum: zero-dependency, kers-niet-taart) ──── */
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-micro:  200ms;    /* hovers, focus, kleine toggles */
  --dur-reveal: 600ms;    /* scroll-reveals, fades */
  --reveal-afstand: 12px; /* translate-afstand van reveals */
}

/* Reduced motion: alle beweging uit, content direct zichtbaar */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 0ms;
    --dur-reveal: 0ms;
    --reveal-afstand: 0px;
  }
}