/* ============================================================
   variables.css — Kleuren, fonts en basis voor PL-Digital
   ✏️  Wil je iets aanpassen? Begin hier!
   ============================================================ */

:root {
  /* --- Kleuren --- */
  --bg:        #07090d;       /* Diepzwart */
  --surface:   #0e1117;       /* Kaarten / panelen */
  --border:    #181e28;       /* Randen */
  --accent:    #00e5ff;       /* Cyan (zelfde als Patrick's site) */
  --accent2:   #7b61ff;       /* Paars */
  --text:      #dce8f0;       /* Hoofdtekst */
  --muted:     #3a4a58;       /* Subtekst */
  --gold:      #c8a96e;       /* Goud — voor premium uitstraling */

  /* --- Fonts --- */
  --font-body:    'IBM Plex Mono', monospace;
  --font-display: 'Outfit', sans-serif;      /* Strak en zakelijk */

  /* --- Spacing --- */
  --page-padding: 3rem;
  --bar-height:   60px;
  --radius:       4px;
}

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

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
}

a { color: var(--accent); text-decoration: none; transition: opacity 0.2s; }
a:hover { opacity: 0.75; }
img { max-width: 100%; display: block; }