/* ============================================================
   variables.css — Kleuren, fonts en basis voor Sophie's site
   ✏️  Wil je iets aanpassen? Begin hier!
   ============================================================ */

:root {
  /* --- Kleuren --- */
  --bg:        #0d0a1a;       /* Donker magisch paars */
  --surface:   #16102a;       /* Kaarten / panelen */
  --border:    #2a1f4a;       /* Randen */
  --accent:    #ff5ecb;       /* Roze (BlackPink!) */
  --accent2:   #ffe066;       /* Goud (Harry Potter!) */
  --accent3:   #a78bfa;       /* Zacht paars */
  --text:      #f5e6ff;       /* Hoofdtekst */
  --muted:     #6b5a8a;       /* Subtekst */

  /* --- Fonts --- */
  --font-body:    'Nunito', sans-serif;
  --font-display: 'Cinzel Decorative', cursive;   /* Magisch/fantasy */

  /* --- Spacing --- */
  --page-padding: 2rem;
  --bar-height:   60px;
  --radius:       12px;
}

*, *::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.6;
}

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