/* ============================================================
   BASE — design-tokens, reset en typografie
   Stijl: strak en koel neutraal met de Vitals-huisstijl van
   vitals.nl — rood #de0028 naar oranje #fbb040 als brand-gradient.
   Manrope voor koppen, Inter voor interface.
   ============================================================ */

:root {
  --bg: #f4f5f7;
  --bg-card: #ffffff;
  --bg-soft: #eceef2;
  --ink: #16181d;
  --ink-soft: #565b65;
  --ink-mute: #98a0ac;
  --border: #e7e9ee;
  --border-strong: #cfd3db;
  --accent: #de0028;
  --accent-2: #fbb040;
  --accent-dark: #c50023;
  --accent-soft: #fde8ec;
  --grad: linear-gradient(to right, #de0028 30%, #fbb040 100%);
  --sidebar: #16181e;
  --sidebar-soft: #b8bdc9;
  --sidebar-mute: #7c828f;
  --warn: #c67a2e;
  --warn-soft: #fbf1e2;
  --stop: #d13b3b;
  --stop-soft: #fce9e9;
  --done: #0dad4a;
  --done-soft: #e6f7ec;
  --wait: #3d6a94;
  --wait-soft: #e8f0f7;
  --shadow-sm: 0 1px 2px rgba(18, 22, 33, 0.05);
  --shadow-md: 0 4px 16px rgba(18, 22, 33, 0.07);
  --shadow-lg: 0 16px 40px rgba(18, 22, 33, 0.14);
  --radius: 12px;
  --radius-sm: 8px;
  --font-serif: 'Manrope', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, sans-serif;
}

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

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

::selection { background: var(--accent-soft); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

[role="button"] { user-select: none; }

/* Dunne, rustige scrollbars voor horizontaal scrollende stroken/tabellen */
.sections-timeline, .table-card {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}