/* ============================================================================
   Bloezem CRM — basis.css
   Huisstijl (kleuren + Gotham Rounded) + herbruikbare componenten.
   Wordt door elke pagina geladen.
   ============================================================================ */

/* ── Lettertypen ─────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Gotham Rounded';
  src: url('../fonts/GothamRounded-Book.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham Rounded';
  src: url('../fonts/GothamRounded-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── Huisstijl ───────────────────────────────────────────────────────────── */
:root {
  --paars:        #B094BF;
  --paars-donker: #9a7bab;
  --paars-licht:  #EFE7F5;
  --paars-pale:   #FAF6FA;
  --salie:        #82988D;
  --tekst:        #1E2354;
  --tekst-sec:    #6b7280;
  --rand:         #E2D9EA;
  --wit:          #ffffff;

  --ok-bg:   #f0fdf4;  --ok:   #166534;  --ok-rand:  #bbf7d0;
  --fout-bg: #fef2f2;  --fout: #b91c1c;  --fout-rand:#fecaca;

  --radius: 12px;
  --schaduw: 0 1px 3px rgba(30,35,84,.06), 0 8px 24px rgba(30,35,84,.05);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Gotham Rounded', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--tekst);
  background: var(--paars-pale);
  line-height: 1.55;
  font-size: 15px;
}

h1, h2, h3 { font-weight: 700; color: var(--salie); line-height: 1.2; }

a { color: var(--paars-donker); }

/* ── Knoppen ─────────────────────────────────────────────────────────────── */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px;
  background: var(--paars); color: #fff;
  border: none; border-radius: 10px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: filter .15s, background .15s;
}
.knop:hover { filter: brightness(.96); }
.knop:active { filter: brightness(.92); }
.knop[disabled] { opacity: .55; cursor: default; filter: none; }
.knop--blok { width: 100%; }
.knop--grijs { background: #eef0f3; color: var(--tekst); font-weight: 400; }
.knop--rood  { background: #ef4444; }
.knop--klein { padding: 6px 12px; font-size: 13px; }

/* ── Formuliervelden ─────────────────────────────────────────────────────── */
.veld-label {
  display: block; font-size: 12.5px; color: var(--tekst-sec);
  margin: 14px 0 5px; font-weight: 400;
}
.veld {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--rand); border-radius: 10px;
  font-family: inherit; font-size: 15px; color: var(--tekst);
  background: var(--wit); transition: border-color .15s, box-shadow .15s;
}
.veld:focus {
  outline: none; border-color: var(--paars);
  box-shadow: 0 0 0 3px rgba(176,148,191,.18);
}
.veld--code { letter-spacing: .35em; text-align: center; font-size: 22px; font-weight: 700; }

/* ── Meldingen ───────────────────────────────────────────────────────────── */
.melding { font-size: 13.5px; padding: 10px 14px; border-radius: 10px; margin-top: 14px; }
.melding--ok   { background: var(--ok-bg);   color: var(--ok);   border: 1px solid var(--ok-rand); }
.melding--fout { background: var(--fout-bg); color: var(--fout); border: 1px solid var(--fout-rand); }

/* ── Toegankelijkheid ────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--paars); outline-offset: 2px; }

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