/* Gedeelde basis voor alle pagina's: kleuren (licht/donker), lettertypes, achtergrond en thema-knop. */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@500;600;700&family=Fira+Sans:wght@400;500;600;700&display=swap');
:root {
  color-scheme: light;
  --sans: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --cyan: #0891b2;
  --orange: #ea7a12;
  /* grafiekreeksen download/upload (gevalideerd met dataviz validate_palette, licht + donker) */
  --s-down: #0891b2;
  --s-up: #8b5cf6;
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #eef1f8;
  --card: var(--surface);
  --text: #0f172a;
  --muted: #5f6b82;
  --line: #e1e6f0;
  --accent: #3d63f5;
  --accent-2: #14b88a;
  --accent-3: #8b5cf6;
  --ok: #16a34a;
  --warn: #d98a06;
  --hot: #dc2626;
  --error: #b3261e;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06);
  --glow-1: rgba(79, 140, 255, .16);
  --glow-2: rgba(46, 230, 166, .14);
  --glow-3: rgba(155, 107, 255, .12);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --cyan: #22d3ee;
  --orange: #fb923c;
  --s-down: #0aa6c4;
  --s-up: #8b6cf0;
  --bg: #080c18;
  --surface: #101729;
  --surface-2: #17203a;
  --text: #e8ecf8;
  --muted: #8d98b3;
  --line: #222c47;
  --accent: #7b94ff;
  --accent-2: #2ee6a6;
  --accent-3: #a98bff;
  --ok: #34d399;
  --warn: #fbbf24;
  --hot: #fb7185;
  --error: #ff8a80;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
  --glow-1: rgba(79, 140, 255, .18);
  --glow-2: rgba(46, 230, 166, .10);
  --glow-3: rgba(155, 107, 255, .16);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(900px 500px at 10% -10%, var(--glow-1), transparent 60%),
    radial-gradient(700px 420px at 95% 0%, var(--glow-3), transparent 60%),
    radial-gradient(800px 500px at 50% 110%, var(--glow-2), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.theme-toggle {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer;
  transition: border-color .15s, color .15s, transform .15s;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { grid-area: 1 / 1; width: 18px; height: 18px; }
.theme-toggle .ic-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }