/* ================================
   VARIABLES — Merkidentiteit Goessens
   Gebruik altijd deze variabelen
   in plaats van losse kleurwaarden
================================ */

:root {

  /* --- Kleuren --- */
  --kleur-rood: #EF2B2F;
  --kleur-rood-donker: #C4171B;
  --kleur-zwart: #231F1F;
  --kleur-donkergrijs: #2E2A2A;
  --kleur-middengrijs: #666666;
  --kleur-lichtgrijs: #F5F5F5;
  --kleur-wit: #FFFFFF;

  /* --- Typografie --- */
  --font-hoofd: 'Barlow', sans-serif;
  --font-accent: 'Barlow Condensed', sans-serif;

  /* --- Lettergroottes --- */
  --tekst-klein: 0.875rem;    /* 14px */
  --tekst-basis: 1rem;        /* 16px */
  --tekst-medium: 1.125rem;   /* 18px */
  --tekst-groot: 1.5rem;      /* 24px */
  --tekst-h2: 2rem;           /* 32px */
  --tekst-h1: 3rem;           /* 48px */

  /* --- Spacing --- */
  --ruimte-xs: 0.5rem;        /* 8px */
  --ruimte-s: 1rem;           /* 16px */
  --ruimte-m: 2rem;           /* 32px */
  --ruimte-l: 4rem;           /* 64px */
  --ruimte-xl: 8rem;          /* 128px */

  /* --- Layout --- */
  --max-breedte: 1200px;
  --border-radius: 4px;

  /* --- Schaduwen --- */
  --schaduw-klein: 0 2px 8px rgba(0,0,0,0.08);
  --schaduw-medium: 0 4px 20px rgba(0,0,0,0.12);

}