/* =============================================================
   BOUWHUIS MEDIA — DESIGN TOKENS
   -------------------------------------------------------------
   Alle kleuren, maten en tijden staan hier. Wil je de huisstijl
   aanpassen, dan hoef je alleen dit bestand te wijzigen.
   ============================================================= */

:root {

  /* --- KLEUR ------------------------------------------------ */

  /* Tekst */
  --ink:          #0A1020;   /* koppen, bijna zwart met een blauwe ondertoon */
  --ink-soft:     #47536B;   /* lopende tekst */
  --ink-muted:    #8A94A8;   /* labels, micro-copy */

  /* Vlakken */
  --surface:      #FFFFFF;
  --surface-2:    #F6F8FB;   /* rustige sectie-achtergrond */
  --surface-3:    #EEF2F8;   /* subtiele accentvlakken */
  --line:         #E4E9F1;   /* randen, 1px scheidingen */
  --line-soft:    #EFF2F7;

  /* Merk */
  --brand:        #1B4FE0;   /* accentkleur: knoppen, actieve staat, lijnen */
  --brand-hover:  #123CB8;
  --brand-ink:    #0E2E8F;
  --brand-tint:   #EEF3FF;   /* lichte achtergrond voor accentvlakken */
  --brand-tint-2: #DCE6FF;

  /* Donker (alleen 'Ons werk' en de slot-CTA) */
  --dark:         #070C18;
  --dark-2:       #101A30;
  --dark-line:    rgba(255,255,255,.10);
  --dark-text:    rgba(255,255,255,.66);

  /* Functioneel, uitsluitend binnen de dashboard-visual */
  --positive:      #12A06A;
  --positive-bg:   #E7F7F0;
  /* Alleen voor de drie pills onder de hero-tekst */
  --positive-diep: #0D7F53;   /* het vinkje */
  --positive-vlak: #F1FAF5;   /* de vulling */
  --positive-rand: #CDEADD;   /* het randje */
  --warning:      #E2A33A;
  --star:         #F5A623;

  /* --- TYPOGRAFIE ------------------------------------------- */

  --font: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* DE KOPPENLADDER — vier maten, en verder niets.
     Elke kop op de site pakt er hier één. Staat er in een sectie
     nog een eigen font-size, dan is dat een fout die je meteen
     ziet: die kop loopt uit de pas met de rest.

     --fs-hero    alleen de kop bovenaan de homepage
     --fs-display de kop bovenaan elke ándere pagina
     --fs-h2      elke sectiekop, waar dan ook
     --fs-h3      een kop bínnen een sectie (kaart, kolom, blok)  */
  --fs-hero:    clamp(3.5rem, 1.1rem + 5.5vw, 5.6rem);    /* 90px */
  --fs-display: clamp(2.1rem, 1.25rem + 3.1vw, 4rem);     /* 64px */
  --fs-h2:      clamp(1.95rem, 1.2rem + 2.4vw, 3.4rem);   /* 54px */
  --fs-h3:      clamp(1.2rem, 1.05rem + .5vw, 1.375rem);  /* 22px */
  --fs-lead:    clamp(1.05rem, .98rem + .35vw, 1.2rem);
  --fs-body:    1.0625rem;   /* 17px */
  --fs-small:   .9375rem;    /* 15px */
  --fs-micro:   .8125rem;    /* 13px */

  /* Grote koppen staan strakker op elkaar en trekken de letters
     iets naar elkaar toe; kleine koppen hebben juist lucht nodig
     om leesbaar te blijven. Vandaar twee paar in plaats van één. */
  --lh-groot:   1.04;   /* h1 en h2 */
  --lh-head:    1.12;   /* h3, h4, kaartkoppen */
  --lh-body:    1.65;

  --ls-groot:   -.035em;   /* h1 en h2 */
  --ls-head:    -.022em;   /* h3, h4, kaartkoppen */
  --ls-label:   .09em;

  /* --- RUIMTE ----------------------------------------------- */

  /* Op een breed scherm mag de site niet aanvoelen als een smalle
     kolom in een witte vlakte. De herocompositie gaat nog breder;
     zie .toneel__binnen in home.css. */
  --container:       1320px;   /* pagina-content en footer */
  --container-wide:  1360px;   /* alleen de header: logo, links, telefoon en CTA */
  --measure:    64ch;         /* maximale leesbreedte */

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --section-y:  clamp(4.5rem, 2.5rem + 6vw, 8rem);
  --gutter:     clamp(1.25rem, .6rem + 2vw, 2.5rem);

  /* --- VORM ------------------------------------------------- */

  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(10,16,32,.05);
  --shadow-md: 0 1px 2px rgba(10,16,32,.04), 0 8px 24px rgba(10,16,32,.05);
  --shadow-lg: 0 2px 4px rgba(10,16,32,.04), 0 24px 60px rgba(10,16,32,.09);
  --shadow-brand: 0 8px 24px rgba(27,79,224,.24);

  /* --- BEWEGING --------------------------------------------- */

  --ease:      cubic-bezier(.22,1,.36,1);
  --t-fast:    160ms;
  --t-base:    260ms;
  --t-slow:    520ms;

  /* --- LAGEN ------------------------------------------------ */

  --z-header: 100;
  --z-menu:   110;
  --z-sticky: 90;
}