:root{
  --bg:#f4f3f0; --panel:#ffffff; --border:#d8d6d0; --border-strong:#b8b5ac;
  --text:#232220; --text-2:#6b6862; --text-muted:#9a978f;
  --accent-bg:#e6f1fb; --accent-text:#0c447c;
  --warn-bg:#faeeda; --warn-text:#633806;
  --danger-text:#a32d2d; --danger-bg:#fbe4e4;
  --radius:8px; --card-radius:12px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ── Generieke panelen/kaarten ── */
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--card-radius);
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}

/* ── Generieke formulierelementen (herbruikt door elke _form-partial) ── */
label{ font-size:11px; color:var(--text-2); display:block; margin-bottom:4px; margin-top:14px; }
label:first-of-type{ margin-top:0; }

input[type=text], input[type=password], input[type=email], textarea, select{
  width:100%;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg);
  font-size:16px;
  padding:9px 10px;
  font-family:inherit;
}
textarea{ resize:none; }

button, .btn{
  border:1px solid var(--border-strong);
  background:#fff;
  border-radius:var(--radius);
  padding:8px 14px;
  font-size:13px;
  cursor:pointer;
  color:var(--text);
  font-family:inherit;
}
.btn-primary{
  background:var(--text);
  color:#fff;
  border:none;
  font-weight:600;
}
.btn-block{ width:100%; }

/* ── Flash-/foutmeldingen (partials/flash_message.php) ── */
.flash-box{ font-size:12px; border-radius:var(--radius); padding:8px 12px; margin-bottom:16px; }
.flash-error{ background:var(--danger-bg); color:var(--danger-text); }
.flash-success{ background:#e3f3e6; color:#256d32; }