/* =============================================================================
 * Elevantum — gedeeld thema (design tokens)
 * -----------------------------------------------------------------------------
 * Zwart-geel: wit fundament, bijna-zwarte tekst, geel als signatuur. Geel is
 * de dominante kleur in vlakken (cirkels, header, highlights, knoppen); de
 * fijne accenten en tekst zijn bijna-zwart, want geel is onleesbaar als tekst
 * op wit. Poppins als lettertype.
 *
 * Wil je iets aan de stijl veranderen? Doe het hier, dan volgt de rest.
 * ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
  /* Merk */
  --brand:#111111;          /* accenten & tekst: bijna-zwart */
  --brand-yellow:#FDD142;   /* signatuurgeel — dominant: vlakken, cirkels, highlights, knoppen */
  --brand-ink:#1A1206;      /* donkere tekst die op geel komt te staan */
  --brand-tint:#FEF3D0;     /* zachte gele waas voor vlakken/hover */

  /* Fundament */
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --ink:#0A0A0A;
  --muted:#5C6066;
  --line:#ECECEC;

  /* Functionele statuskleuren (UI-semantiek, geen merk) */
  --done:#1A7F37;
  --active:#B45309;
  --todo:#6E7075;

  /* Vorm & diepte */
  --radius:10px;
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  --maxw:820px;

  /* Typografie */
  --font-body:"Poppins",system-ui,-apple-system,sans-serif;
  --font-display:"Poppins",system-ui,-apple-system,sans-serif;
  --track-display:-0.01em;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto}

h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:var(--track-display)}

/* CTA-/labelstijl: kapitalen met ruime letterafstand */
.cta,.kicker{
  font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:12px;
}

/* Knop: geel vlak met donkere tekst, inverteert bij hover naar zwart */
.btn{
  display:inline-block;padding:11px 22px;
  background:var(--brand-yellow);color:var(--brand-ink);
  border:1.5px solid var(--brand-yellow);border-radius:999px;
  font-weight:600;text-decoration:none;cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}