/* ==========================================================================
   56 Digital - ontwerptokens

   Alle kleuren, lettermaten en afstanden staan hier. Nergens anders in de
   CSS hoort nog een hexwaarde of een los pixelgetal te staan.

   De waarden komen uit docs/huisstijl.md, deel 03. Waar de gids alleen een
   desktopwaarde geeft, loopt de maat vloeiend van 360 px tot 1280 px
   viewport en landt hij op de gidswaarde.
   ========================================================================== */

:root {
  /* --- Kleur -------------------------------------------------------------
     Vier huisstijlkleuren, verhouding 60 zwart / 25 crème / 10 blauw /
     5 koraal. Koraal wijst aan en komt hoogstens een keer per pagina voor. */
  --kleur-zwart: #0C0C0E;
  --kleur-blauw: #2E52F2;
  --kleur-koraal: #FF4D57;
  --kleur-creme: #F4F1EA;
  --kleur-wit: #FFFFFF;
  --kleur-placeholder: #D9D9D9;

  /* Losse kanaalwaarden, zodat een halftransparante variant geen nieuwe
     hexwaarde nodig heeft. Gebruik: rgb(var(--rgb-zwart) / 0.15) */
  --rgb-zwart: 12 12 14;
  --rgb-creme: 244 241 234;

  /* Rollen. Verwijs in base.css naar deze, niet naar de kleurnamen. */
  --kleur-achtergrond: var(--kleur-creme);
  --kleur-tekst: var(--kleur-zwart);
  --kleur-tekst-zacht: rgb(var(--rgb-zwart) / 0.72);
  --kleur-lijn: var(--kleur-zwart);
  --kleur-lijn-zacht: rgb(var(--rgb-zwart) / 0.15);
  --kleur-link: var(--kleur-blauw);
  --kleur-focus: var(--kleur-blauw);

  /* Op donkere vlakken */
  --kleur-donker-vlak: var(--kleur-zwart);
  --kleur-donker-tekst: var(--kleur-creme);
  --kleur-donker-zacht: rgb(var(--rgb-creme) / 0.65);
  --kleur-donker-lijn: rgb(var(--rgb-creme) / 0.25);

  /* Knoppen. Primair is koraal met zwarte tekst (5,9:1), secundair is
     zwart met crème tekst (17,4:1). Allebei ruim boven AA. */
  --kleur-knop-primair: var(--kleur-koraal);
  --kleur-knop-primair-tekst: var(--kleur-zwart);
  --kleur-knop-secundair: var(--kleur-zwart);
  --kleur-knop-secundair-tekst: var(--kleur-creme);

  /* --- Letter ------------------------------------------------------------
     Chivo voor alles wat gelezen wordt, Chivo Mono voor labels, cijfers,
     data en URL. Mono nooit voor lopende tekst. */
  --font-tekst: "Chivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Chivo Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --gewicht-normaal: 400;
  --gewicht-vet: 700;
  --gewicht-zwart: 900;

  /* --- Typografische schaal ----------------------------------------------
     H1 56/60, H2 40/48, H3 28/36, body 18/29 en label 13 komen uit de gids.
     Lead, H4 en klein zijn toegevoegd voor de pagina die nog komen. */
  --maat-h1: clamp(2.25rem, 1.761rem + 2.174vw, 3.5rem);
  --maat-h2: clamp(1.75rem, 1.457rem + 1.304vw, 2.5rem);
  --maat-h3: clamp(1.375rem, 1.228rem + 0.652vw, 1.75rem);
  --maat-h4: 1.25rem;
  --maat-lead: 1.375rem;
  --maat-body: 1.125rem;
  --maat-klein: 1rem;
  --maat-label: 0.8125rem;

  --regel-h1: 1.07;
  --regel-h2: 1.2;
  --regel-h3: 1.29;
  --regel-h4: 1.4;
  --regel-lead: 1.45;
  --regel-body: 1.61;
  --regel-label: 1.3;

  --spatie-titel: -0.02em;
  --spatie-label: 0.14em;

  /* --- Ruimte ------------------------------------------------------------
     Basiseenheid 8 px. De zes stappen uit de gids, meer niet. */
  --ruimte-1: 0.5rem;
  --ruimte-2: 1rem;
  --ruimte-3: 1.5rem;
  --ruimte-4: 2.5rem;
  --ruimte-5: 4rem;
  --ruimte-6: 6.5rem;
  --ruimte-sectie: clamp(4rem, 3.022rem + 4.348vw, 6.5rem);

  /* --- Grid --------------------------------------------------------------
     12 kolommen, 24 px goot, container maximaal 1280 px met de buitenmarge
     daarbinnen. Bij 1280 px is een kolom 71,3 px breed. Lopende tekst staat
     op 7 kolommen, ongeveer 68 tekens. */
  --breedte-max: 80rem;
  --kolommen: 12;
  --goot: 1.5rem;
  --marge-zij: clamp(1.25rem, -0.217rem + 6.522vw, 5rem);
  --breedte-tekst: 40rem;

  /* Het offerteformulier loopt niet over de volle 80 rem: een invulveld van
     1120 px breed nodigt niemand uit om erin te schrijven, en een rij van
     twee kolommen wordt dan te breed om in een oogopslag te overzien. */
  --breedte-formulier: 60rem;

  /* --- Koptekst ----------------------------------------------------------
     Hoogte van de balk die bovenaan blijft staan tijdens het scrollen. De
     balk gebruikt dit als minimumhoogte, en ankers en focus houden precies
     zoveel afstand tot de bovenrand. Wordt de inhoud van de balk ooit hoger,
     pas dit dan mee aan. */
  --kop-hoogte: 4.5625rem;

  /* --- Lijnen en vlakken -------------------------------------------------
     Strak en hoekig. Geen straal, geen schaduw, geen verloop. */
  --lijn-dun: 1px;
  --lijn: 2px;
  --lijn-dik: 4px;
  --balk: 8px;
  --balk-dik: 16px;
  --straal: 0;

  /* --- Breakpoints -------------------------------------------------------
     Let op: custom properties werken niet in @media-regels. Deze staan hier
     als vaste referentie; de media queries in base.css herhalen dezelfde
     getallen letterlijk. */
  --bp-telefoon: 30rem;
  --bp-tablet: 48rem;
  --bp-laptop: 64rem;
  --bp-desktop: 80rem;

  /* --- Beweging ---------------------------------------------------------- */
  --duur-kort: 140ms;
  --duur: 220ms;
  --duur-lang: 520ms;
  --soepel: cubic-bezier(0.2, 0.6, 0.2, 1);
}