/* ══════════════════════════════════════════════════════════════════════
   TODAH — ONTWERPSYSTEEM
   Tokens, letterkeuze en knoppen. GEEN layout.

   Dit bestand wordt als eerste geladen en is bedoeld voor élke pagina,
   ook de pagina's die nog hun eigen opmaak meebrengen. Alles wat hier
   staat moet dus overal kloppen; iets dat maar op één soort pagina waar
   is hoort in site.css of in de pagina zelf.

   Volgorde: basis.css → site.css → pagina-eigen.
   ══════════════════════════════════════════════════════════════════════ */

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

:root{
  /* Kleur */
  --navy:#1a2744;
  --gold:#d4943a;
  --bg:#f9f8f6;
  --white:#fff;
  --text:#1c1917;
  --muted:#78716c;
  --border:#e7e5e4;
  --error:#dc2626;
  --ok:#16a34a;

  /* Vorm */
  --r:12px;

  /* Letter. Inter draagt de tekst: smal, open, goed leesbaar op 13-14px —
     de maat waar deze codebase op draait. Poppins staat op de koppen: die
     is geometrisch en herkenbaar op formaat, maar verliest dat onderscheid
     juist op kleine maten. Vandaar twee, en niet één.
     Inter zelf staat in de body-regel hieronder, niet in een variabele:
     het is de standaard, en --merk is de uitzondering daarop. */
  --merk:'Poppins','Inter',system-ui,sans-serif;
}

body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}

/* ── KNOPPEN ──────────────────────────────────────────────────────────
   font-family:inherit staat op elke knop omdat een <button> anders de
   letter van het besturingssysteem pakt in plaats van die van de pagina.
   De <a>-varianten hebben 'm niet nodig maar krijgen 'm wel, zodat een
   knop die van <a> naar <button> gaat er hetzelfde uit blijft zien. */

.btn-nav{background:var(--gold);color:#fff;border:none;padding:8px 18px;border-radius:8px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-nav:hover{opacity:.9}

.btn-primary{background:var(--gold);color:#fff;border:none;padding:13px 24px;border-radius:10px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;text-decoration:none}
.btn-secondary{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);padding:12px 22px;border-radius:10px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;text-decoration:none}
.btn-primary:hover{opacity:.9}
.btn-secondary:hover{background:rgba(255,255,255,.2)}

/* Twee gelijkwaardige keuzeknoppen naast elkaar: allebei even zwaar,
   alleen omgekeerd van kleur. */
.btn-choice{background:var(--gold);color:#fff;border:2px solid var(--gold);padding:13px 26px;border-radius:10px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;text-decoration:none;text-align:center}
.btn-choice:hover{opacity:.92}
.btn-choice-alt{background:#fff;color:var(--navy);border-color:#fff}