/*
 * Bestand  : variabelen.css
 * Project  : Verkeersschool Dijkhuizen
 * Datum    : 2026-04-14
 * Doel     : Centrale design-tokens — uitsluitend CSS-variabelen, geen regels buiten :root {}
 */

:root {

  /* ─── Kleurenpalet — brandguidelines ──────────────────────────────────── */
  --kleur-donker:       #343a40;   /* donkergrijs — donkere achtergronden, footer */
  --kleur-accent:       #007bff;   /* primair blauw — koppen, knoppen, links    */
  --kleur-accent-diep:  #0056b3;   /* verdiept blauw — hover, gradiënten        */
  --kleur-goud:         #6c757d;   /* grijs — decoratief accent (vervangt goud)  */
  --kleur-goud-donker:  #343a40;   /* donkergrijs — hover states                */
  --kleur-secundair:    #6c757d;   /* grijs — labels, subtekst                  */
  --kleur-tekst:        #4a5568;   /* slate — bodytekst, zachter dan zwart      */
  --kleur-wit:          #ffffff;   /* wit — 2e belangrijkste kleur               */
  --kleur-licht:        #f8fafc;   /* lichtgrijs — afwisselende secties         */
  --kleur-licht-blauw:  #eff6ff;   /* lichtblauw — blauw-getinte sectie-achtergrond */
  --kleur-neutraal:     #6c757d;   /* grijs — captions, subtekst                */
  --kleur-grens:        rgba(0, 0, 0, 0.07);  /* subtiele randen              */

  /* ─── Typografie — lettertypefamilies ─────────────────────────────────── */
  --font-kop:   'Outfit', sans-serif;
  --font-tekst: 'DM Sans', sans-serif;

  /* ─── Typografie — tekstgrootte-schaal ────────────────────────────────── */
  --tekst-xs:   0.75rem;   /*  12 px */
  --tekst-sm:   0.875rem;  /*  14 px */
  --tekst-base: 1rem;      /*  16 px */
  --tekst-lg:   1.125rem;  /*  18 px */
  --tekst-xl:   1.25rem;   /*  20 px */
  --tekst-2xl:  1.5rem;    /*  24 px */
  --tekst-3xl:  2rem;      /*  32 px */
  --tekst-4xl:  3.5rem;    /*  56 px */

  /* ─── Spacing — 8pt grid-schaal ───────────────────────────────────────── */
  --ruimte-1:  0.5rem;    /*   8 px */
  --ruimte-2:  1rem;      /*  16 px */
  --ruimte-3:  1.5rem;    /*  24 px */
  --ruimte-4:  2rem;      /*  32 px */
  --ruimte-5:  2.5rem;    /*  40 px */
  --ruimte-6:  3rem;      /*  48 px */
  --ruimte-7:  3.5rem;    /*  56 px */
  --ruimte-8:  4rem;      /*  64 px */
  --ruimte-9:  4.5rem;    /*  72 px */
  --ruimte-10: 5rem;      /*  80 px */
  --ruimte-11: 5.5rem;    /*  88 px */
  --ruimte-12: 6rem;      /*  96 px */
  --ruimte-13: 6.5rem;    /* 104 px */
  --ruimte-14: 7rem;      /* 112 px */
  --ruimte-15: 7.5rem;    /* 120 px */
  --ruimte-16: 8rem;      /* 128 px */

  /* ─── Layout ───────────────────────────────────────────────────────────── */
  --container-breed: 1200px;

  /* ─── Afronding ────────────────────────────────────────────────────────── */
  --afronding:       12px;
  --afronding-groot: 20px;
  --afronding-pill:  100px;

  /* ─── Overgang — vloeiende cubic-bezier easing ─────────────────────────── */
  --overgang: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Schaduwen ────────────────────────────────────────────────────────── */
  --schaduw-zacht:  0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
  --schaduw-medium: 0 4px 16px rgba(0,0,0,0.10), 0 8px 32px rgba(0,0,0,0.06);
  --schaduw-sterk:  0 8px 32px rgba(0,0,0,0.18), 0 24px 64px rgba(0,0,0,0.08);
  --schaduw-accent: 0 4px 20px rgba(0, 123, 255, 0.30);
  --schaduw-goud:   0 4px 20px rgba(108, 117, 125, 0.30);

}