/* ==========================================================================
   tokens.css  -  huisstijl van fakroprijzen.nl
   Gebaseerd op de fakro.pl-analyse (onderzoek/huisstijl-analyse-fakro-pl.md),
   de digitale FAKRO-huisstijl waar de nieuwe fakro.nl ook naartoe gaat.
   Alle kleuren, maten en typografie staan hier, nergens anders hardcoded.
   ========================================================================== */

:root {
  /* --- groen (merkkleur) ------------------------------------------------ */
  --groen:              #02983E;   /* primair. knoppen, focus, accenten */
  --groen-hover:        #017238;   /* hover van de primaire knop */
  --groen-link:         #015B25;   /* tekstlinks en link-hover */
  --groen-diep:         #013D19;
  --groen-tint:         #E6F5EC;   /* zachte highlight-vlakken, badges */
  --groen-tint-2:       #CCEAD8;

  /* --- neutraal (koel grijs met groenzweem) ------------------------- */
  --inkt:               #001E0C;   /* standaard bodytekst, donkere vlakken, actieve chips */
  --inkt-zacht:         #3E4243;   /* iets zachtere donkere tekst */
  --grijs-gedempt:      #5A6363;   /* bijschriften, labels, secundaire tekst.
                                      was #7C8586, dat haalde geen 4.5:1 op wit */
  --grijs-lijn:         #D1D5DC;   /* kaart- en inputranden (border-gray-300) */
  --grijs-lijn-sterk:   #AFB8B9;   /* outline-chips, sterkere randen */
  --grijs-kop-lijn:     #EBEDED;   /* header-onderrand, scheidingslijnen */
  --vlak:               #F5F6F6;   /* afwisselende sectie-achtergrond, zebra-rij */
  --vlak-2:             #FFFFFF;   /* standaard sectie en header */
  --wit-zacht:          #FDFDFD;   /* kaartachtergrond, knop-tekstkleur */
  --achtergrond:        #FFFFFF;
  --voet:               #1F2121;   /* footer-achtergrond, warm bijna-zwart */

  /* --- accent per categorie (voorlopig, kan later bij) ------------- */
  --accent-dakramen:      #02983E;
  --accent-zonwering:     #56ABA4;
  --accent-zoldertrappen: #1C5F2B;
  --accent:               var(--accent-dakramen);
  --accent-contrast:      #FDFDFD;

  /* --- status en steun (spaarzaam) ------------------------------- */
  --fout:               #E30613;
  --let-op:             #9E5D04;
  --let-op-vlak:        #FBF6EC;
  --foto-sluier:        rgba(2, 24, 27, .6);

  /* --- typografie: Inter, gewichten 400/500/600, geen bold ------- */
  --font: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gew-normaal:   400;
  --gew-medium:    500;
  --gew-semibold:  600;

  /* een maat groter aan de kleine kant, op verzoek van Finn (2026-09-04):
     bijschriften en labels waren te klein om vlot te lezen. */
  --tekst-2xs:   0.625rem;   /* 10, compacte prijstabel-koprij (fakroprijzen.nl-referentie) */
  --tekst-xs:    0.8125rem;  /* 13, was 12 */
  --tekst-sm:    0.9375rem;  /* 15, was 14 */
  --tekst-basis: 1rem;       /* 16 */
  --tekst-md:    1.375rem;   /* 22, was 20.  sectiekop mobiel */
  --tekst-lg:    1.75rem;    /* 28, was 24.  sectiekop desktop */
  --tekst-xl:    2rem;       /* 32 */
  --tekst-2xl:   2.5rem;     /* 40  veelgebruikte grote kop */
  --tekst-3xl:   3.5rem;     /* 56 */

  --regel:       1.5;        /* body */
  --regel-kop:   1.375;      /* leading-snug */
  --spatie-kop:  -0.025em;   /* tracking-tight */

  /* --- ruimte -------------------------------------------------- */
  --ruimte-1: 0.5rem;   /* 8  */
  --ruimte-2: 1rem;     /* 16  werkpaard */
  --ruimte-3: 1.5rem;   /* 24 */
  --ruimte-4: 2rem;     /* 32 */
  --ruimte-5: 3.75rem;  /* 60  sectiepadding */
  --ruimte-6: 6.5rem;   /* 104 ruime sectiepadding */

  /* --- vorm -------------------------------------------------- */
  --radius:       10px;   /* kaarten, inputs, dropdowns, beeld */
  --radius-groot: 14px;
  --radius-pill:  999px;  /* knoppen, chips, tags */

  --schaduw-sm: 0 1px 2px rgba(0, 30, 12, .06);   /* zeer spaarzaam */

  /* --- maatvoering ---------------------------------------- */
  --breedte-max:    1440px;
  --breedte-tekst:  68ch;
  /* hoogte van .site-kop: min-height 64px + padding-block ruimte-1 (2x8px)
     + 1px onderrand, alles in box-sizing:border-box. Gebruikt als
     scroll-margin-top voor in-pagina-ankers (bijv. klikbare producttype-
     badges), zodat de sticky header een gesprongen doel niet verbergt.
     Bij een andere headerhoogte hier aanpassen. Onder 900px wordt deze
     waarde overschreven in base.css: daar valt de zoekbalk naar een eigen
     rij en is de kop dus hoger. */
  --kop-hoogte: 65px;

  /* --- iconen als mask, zodat de kleur uit CSS komt -------- */
  --icoon-zoek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");

  /* --- motion -------------------------------------------- */
  --overgang:     300ms cubic-bezier(.16, 1, .3, 1);
  --overgang-lang: 500ms cubic-bezier(.16, 1, .3, 1);

  /* de twee vaste kolommen links in een prijstabel: de productnaam en het
     regellabel (Art.nr, Excl., Incl.). Vast, want de labelkolom plakt met
     position: sticky op left en moet dus precies weten waar de eerste kolom
     eindigt. Verander je er een, verander dan ook de mobiele waarden
     onderin componenten.css. */
  --rijkop-b: 6rem;
  --rijlabel-b: 2.6rem;
  /* ruimere naamkolom, alleen voor tabellen die er niet door gaan scrollen.
     prijstabel.js meet dat per tabel en zet dan .is-brede-naamkolom op het
     omhulsel. Finns regel 2026-09-09: op tabellen die toch al horizontaal
     scrollen juist niet de kolom met de soorten producten verbreden. */
  --rijkop-breed: 8.5rem;
}