/* ============================================================
   tokens.css - het huissysteem
   ------------------------------------------------------------
   Dit bestand wordt NOOIT per klant aangepast, op twee dingen na:
   de drie --accent tokens en --font-display. Alles daaronder is
   gedeeld over elke site, zodat elke oplevering dezelfde ritmes
   en dezelfde radius- en spacing-logica gebruikt.

   Contrastparen zijn machinaal nagerekend, zie tools/check.py.
   ============================================================ */

/* De volgorde van de lagen staat hier vast, niet in de volgorde
   van de <link>-regels. Raakt een stylesheet ooit uit volgorde,
   dan blijft de cascade toch kloppen. */
@layer tokens, base, components, site;

@layer tokens {
  :root {
    color-scheme: light;

    /* ---- Neutrale ladder -----------------------------------
       Warm-neutraal, zodat elk accent er rustig op ligt.
       Geen #000000: --n-11 is de donkerste tekstkleur.        */
    --n-0:  #fbfaf9;   /* paginaachtergrond                    */
    --n-1:  #f6f4f2;   /* ingezakt vlak                        */
    --n-2:  #eeebe8;   /* paneel, kaart                        */
    --n-3:  #e0dcd7;   /* haarlijn, rand                       */
    /* --n-4 is de rand van een invoerveld. Die rand is het enige
       wat aangeeft waar het veld begint, dus hij valt onder WCAG
       1.4.11 en moet 3:1 halen tegen de achtergrond. Een lichter
       grijs oogt rustiger maar is dan geen zichtbaar veld meer.
       Haalt 3,56:1 op --bg en 3,12:1 op --bg-panel.            */
    --n-4:  #8d837a;   /* rand op gevuld vlak                  */
    --n-6:  #6f6862;   /* gedempte tekst                       */
    --n-8:  #4a443f;
    --n-9:  #35302c;   /* lopende tekst                        */
    --n-11: #1f1c19;   /* koppen, off-black                    */

    /* ---- Accent: het enige wat per klant verschuift --------
       Standaard bos-groen. Vertrouwen-eerst, en bewust niet
       het beige/messing/oxbloed-palet en niet AI-paars.
       Overschrijf deze drie in de site.css van de klant.      */
    --accent:        #1f5741;
    --accent-strong: #16402f;   /* hover, actieve staat        */
    --accent-tint:   #e7efeb;   /* vlak achter accentinhoud    */
    --on-accent:     #ffffff;   /* tekst bovenop --accent      */

    /* ---- Semantisch ---------------------------------------- */
    --bg:          var(--n-0);
    --bg-sunken:   var(--n-1);
    --bg-panel:    var(--n-2);
    --rule:        var(--n-3);
    --text:        var(--n-9);
    --text-strong: var(--n-11);
    --text-muted:  var(--n-6);
    --danger:      #8f2f24;
    --danger-tint: #fbecea;

    /* ---- Typografie ----------------------------------------
       Sans is de standaard. Een serif komt er alleen in als je
       in een zin kunt zeggen waarom deze serif bij dit merk hoort.
       Fluid van 320px tot 1440px.                             */
    --font-display: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-body:    var(--font-display);

    --step--1: clamp(0.83rem, 0.80rem + 0.16vw, 0.94rem);
    --step-0:  clamp(1.00rem, 0.96rem + 0.22vw, 1.13rem);
    --step-1:  clamp(1.20rem, 1.12rem + 0.38vw, 1.42rem);
    --step-2:  clamp(1.44rem, 1.31rem + 0.61vw, 1.80rem);
    --step-3:  clamp(1.73rem, 1.53rem + 0.97vw, 2.29rem);
    --step-4:  clamp(2.07rem, 1.77rem + 1.48vw, 2.91rem);
    --step-5:  clamp(2.49rem, 2.04rem + 2.22vw, 3.70rem);

    --lh-tight:   1.12;   /* koppen                            */
    --lh-snug:    1.32;   /* subkoppen                         */
    --lh-body:    1.6;
    --measure:    65ch;

    /* Italic met stokken onder de regel (y g j p q) knipt af
       zonder deze twee. Zie .italic in base.css.              */
    --lh-italic-min: 1.15;

    /* ---- Ruimte --------------------------------------------- */
    --sp-3xs: 0.25rem;
    --sp-2xs: 0.5rem;
    --sp-xs:  0.75rem;
    --sp-s:   1rem;
    --sp-m:   1.5rem;
    --sp-l:   2.25rem;
    --sp-xl:  3.5rem;
    --sp-2xl: 5rem;
    --sp-3xl: 7rem;

    /* Sectieritme. Hero-bovenmarge blijft onder 6rem op desktop. */
    --section-y:   clamp(3rem, 2rem + 5vw, 5.5rem);
    --hero-pad-top: clamp(2.5rem, 1.5rem + 4vw, 6rem);

    /* ---- Maatvoering ---------------------------------------- */
    --wrap:       72rem;
    --wrap-tight: 52rem;
    --gutter:     clamp(1.25rem, 0.9rem + 1.7vw, 2.5rem);
    --nav-h:      72px;      /* eenregelig op desktop, 64-80px  */

    /* ---- Radius: een systeem, geen mengelmoes --------------- */
    --r-s:    6px;
    --r-m:    10px;
    --r-l:    16px;
    --r-full: 999px;

    /* ---- Schaduw, getint naar de achtergrond ---------------- */
    --shadow-s: 0 1px 2px rgb(63 55 47 / 0.06),
                0 1px 1px rgb(63 55 47 / 0.04);
    --shadow-m: 0 2px 4px rgb(63 55 47 / 0.05),
                0 8px 20px -6px rgb(63 55 47 / 0.12);

    /* ---- Beweging: intensiteit 2 tot 4 --------------------- */
    --ease:      cubic-bezier(0.2, 0, 0.1, 1);
    --dur-fast:  120ms;
    --dur:       220ms;
    --dur-slow:  380ms;

    --focus-ring: 3px;
  }

  /* Beweging uit betekent echt uit, niet bijna uit. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-fast: 1ms;
      --dur:      1ms;
      --dur-slow: 1ms;
    }
  }
}