:root {
  color-scheme: dark;
  --accent-hover: #5a52e0;
  /* leesbare tekstkleur op een amberkleurige badge */
  --on-warn: #0a0c12;
  /* kleurverloop van de hero-kop */
  --grad-1: #a78bfa;
  --grad-2: #6c63ff;
  --grad-3: #38bdf8;
  --nav-bg: rgba(10,12,18,.88);
  --chip-bg: rgba(255,255,255,.04);
  --overlay: rgba(0,0,0,.7);
  --shadow-sm: 0 8px 24px rgba(0,0,0,.3);
  --shadow-lg: 0 40px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
}
html:root {
  color-scheme: light;
  --bg: #f7f8fc;
  --surface: #ffffff;
  --surface2: #eef0f7;
  --border: #e0e3ee;
  --accent: #5b52e8;
  --accent-hover: #4a41d6;
  --accent2: #7048d8;
  --text: #14172a;
  --muted: #5c6080;
  --success: #177a41;
  --danger: #c93838;
  --error: #c93838;
  --warn: #8f5a0c;
  --on-warn: #ffffff;
  --green: #15803d;
  --blue: #1d4ed8;
  --amber: #b45309;
  --grad-1: #6d28d9;
  --grad-2: #4f46e5;
  --grad-3: #0369a1;
  --nav-bg: rgba(255,255,255,.88);
  --chip-bg: rgba(20,22,32,.05);
  --overlay: rgba(20,22,32,.55);
  --shadow-sm: 0 4px 16px rgba(20,22,32,.08);
  --shadow-lg: 0 24px 60px rgba(20,22,32,.12), 0 0 0 1px rgba(20,22,32,.05);
}