/*
 * base.css
 * ─────────────────────────────────────────────────────
 * Reset, CSS-variabelen (kleuren, typografie) en globale
 * bodystijlen. Pas hier de kleurpallet en lettertypes aan.
 *
 * Lettertypes worden geladen via Google Fonts in index.html:
 *   - Barlow Condensed 300 / 700 / 900  →  koppen, nummers
 *   - Barlow 300 / 400 italic            →  bodytekst
 *   - DM Mono 300                        →  labels, tags, knoppen
 * ─────────────────────────────────────────────────────
 */

/* ── Reset ──────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Kleurenpalet ────────────────────────────────────
 * Grijsschaal + één accentkleur (warm oranje).
 * Verander --accent om het hele kleurschema te shiften.
 * ──────────────────────────────────────────────────── */
:root {
  --black:  #0e0e0e;   /* Bijna zwart - tekst, knoppen, donkere achtergronden   */
  --dark:   #1c1c1c;   /* Donker grijs - footer, borders op donkere achtergrond */
  --gray:   #5a5a5a;   /* Middengrijs - bodytekst, subtitels                    */
  --mid:    #909090;   /* Licht grijs - placeholder tekst, labels op donker     */
  --border: #d0d0d0;   /* Border kleur - scheidingslijnen op witte achtergrond  */
  --light:  #f0f0f0;   /* Licht grijs - achtergrondtint, decoratieve nummers    */
  --white:  #f8f8f8;   /* Pagina achtergrond - niet puur wit voor minder contrast */
  --accent: #d4622a;   /* Accentkleur - streepje, bullets, hover, CTA-knop      */
}

/* ── Globale stijlen ─────────────────────────────────── */
html {
  scroll-behavior: smooth;  /* Zacht scrollen bij anchor-links */
}

body {
  background: var(--white);
  color: var(--black);
  font-family: 'Barlow', sans-serif;
  font-weight: 300;
}