/* ============================================================================
   VARIABLES — design tokens (kleuren, fonts, spacing).
   ============================================================================
   Alles staat in :root zodat de variabelen overal in de site beschikbaar zijn
   en met var(--name) op te roepen. Verandert er iets aan het merk
   (kleuren bijstellen, font wisselen, spacing dichter), dan pas je het hier
   aan en propagateert het door de hele site.

   Naamgeving is SEMANTISCH: --color-primary i.p.v. --color-blue. Reden:
   als jullie ooit van blauw naar groen rebranden, dan blijft de variabelenaam
   logisch. Variabele = de ROL van een waarde, niet de waarde zelf.
   ============================================================================ */

:root {
  /* ----- Kleuren — merk-palette ------------------------------------------- */

  --color-primary:   #3B6FA0;  /* signature blauw — accenten, CTA, links */
  --color-secondary: #B8C5D4;  /* zilver — supporting, randen, zachte vlakken */
  --color-dark:      #080B10;  /* donker oppervlak — hero, reviews */
  --color-light:     #F2F4F7;  /* licht oppervlak — stats-bar, footer, page bg */
  --color-white:     #FFFFFF;  /* puur wit — service cards */

  /* WhatsApp brand-kleur — alleen voor WhatsApp-CTA. NIET voor andere groene accenten. */
  --color-whatsapp:       #25D366;  /* officieel WhatsApp-groen */
  --color-whatsapp-hover: #1DA851;  /* iets donkerder voor hover-feedback */

  /* ----- Fonts ------------------------------------------------------------- */
  /* De fallback-keten na onze custom fonts:
     system-ui   = standaard OS-font (San Francisco / Segoe UI / Roboto).
     -apple-system = iets oudere Safari die system-ui nog niet kende.
     sans-serif  = absolute laatste vangnet.
     Tijdens de korte font-swap (zie font-display: swap) gebruikt de browser
     deze fallbacks — daarom wil je dat ze er goed uitzien, niet alleen 'werken'. */

  --font-heading: "Outfit", system-ui, -apple-system, sans-serif;
  --font-body:    "DM Sans", system-ui, -apple-system, sans-serif;

  /* ----- Spacing-schaal ---------------------------------------------------- */
  /* Eenheid: rem (1rem = 16px standaard, schaalt mee met browser-instellingen
     van de gebruiker — dat is goed voor toegankelijkheid).

     Modulair t-shirt-systeem: xs / sm / md / lg / xl / 2xl. Geen vrije getallen
     in CSS straks (padding: 17px) — je pakt altijd één van deze stappen.
     Resultaat: visuele consistentie, automatische ritmiek tussen secties. */

  --space-xs:  0.25rem;  /*   4px — minieme details (binnen-padding van een badge) */
  --space-sm:  0.5rem;   /*   8px — kleine afstanden (icon-tekst, button-padding) */
  --space-md:  1rem;     /*  16px — standaard tekst-spacing */
  --space-lg:  2rem;     /*  32px — afstand tussen elementen binnen een sectie */
  --space-xl:  4rem;     /*  64px — afstand tussen secties (verticaal) */
  --space-2xl: 8rem;     /* 128px — extra-ruime sectie-overgangen */
}