/* HM zorg & capaciteit — tokens.css, gegenereerd uit tokens.json. Pas tokens.json aan, niet dit bestand. */
/* thema: light */
:root, [data-theme="light"] {
  --surface: #f5f7f9;
  --surface-raised: #ffffff;
  --surface-inset: #eef2f5;
  --podium: #1b252f;
  --podium-raised: #243040;
  --ink: #1b252f;
  --ink-muted: #5b6b7a;
  --ink-subtle: #7a8c9c;
  --on-podium: #ffffff;
  --on-podium-muted: #9dabb8;
  --brand: #f97216;
  --brand-hover: #ea6912;
  --brand-ink: #b84e09;
  --on-brand: #1b252f;
  --brand-soft: #fff4ec;
  --border: #c3cdd6;
  --border-strong: #7a8c9c;
  --focus: #b84e09;
  --success: #1a7d52;
  --success-bg: #e3f5ec;
  --warning: #8a6100;
  --warning-bg: #fff4d6;
  --danger: #c8321f;
  --danger-bg: #fdecea;
  --info: #1f6fb5;
  --info-bg: #e6f1fb;
  --viz-1: #ea6912;
  --viz-2: #3f4f60;
  --viz-3: #1f8f85;
  --viz-4: #4c86c6;
  --viz-5: #9dabb8;
  --orange-50: #fff4ec;
  --orange-100: #ffe4d0;
  --orange-200: #ffc9a3;
  --orange-300: #ffa86e;
  --orange-400: #fc8b3e;
  --orange-500: #f97216;
  --orange-600: #de5f0e;
  --orange-700: #b84e09;
  --orange-800: #8c3b07;
  --orange-900: #632a05;
  --slate-50: #f5f7f9;
  --slate-100: #e1e7ec;
  --slate-200: #c3cdd6;
  --slate-300: #9dabb8;
  --slate-400: #7a8c9c;
  --slate-500: #5b6b7a;
  --slate-600: #3f4f60;
  --slate-700: #2f3d4e;
  --slate-800: #243040;
  --slate-900: #1b252f;
  --slate-950: #111820;
  --white: #ffffff;
  --shadow-sm: 0 1px 2px rgba(27,37,47,0.08);
  --shadow-md: 0 8px 24px rgba(27,37,47,0.12);
}
/* thema: dark */
[data-theme="dark"] {
  --surface: #1b252f;
  --surface-raised: #243040;
  --surface-inset: #111820;
  --podium: #111820;
  --podium-raised: #1b252f;
  --ink: #ffffff;
  --ink-muted: #9dabb8;
  --ink-subtle: #7a8c9c;
  --on-podium: #ffffff;
  --on-podium-muted: #9dabb8;
  --brand: #f97216;
  --brand-hover: #fc8b3e;
  --brand-ink: #f97216;
  --on-brand: #1b252f;
  --brand-soft: #33261c;
  --border: #2f3d4e;
  --border-strong: #7a8c9c;
  --focus: #f97216;
  --success: #3dba82;
  --success-bg: #15362a;
  --warning: #f2c14e;
  --warning-bg: #3a2f10;
  --danger: #f0776a;
  --danger-bg: #3d1f1b;
  --info: #6fb1f0;
  --info-bg: #15283a;
  --viz-1: #f97216;
  --viz-2: #9dabb8;
  --viz-3: #3fb3a8;
  --viz-4: #7fb0e6;
  --viz-5: #3f4f60;
  --orange-50: #fff4ec;
  --orange-100: #ffe4d0;
  --orange-200: #ffc9a3;
  --orange-300: #ffa86e;
  --orange-400: #fc8b3e;
  --orange-500: #f97216;
  --orange-600: #de5f0e;
  --orange-700: #b84e09;
  --orange-800: #8c3b07;
  --orange-900: #632a05;
  --slate-50: #f5f7f9;
  --slate-100: #e1e7ec;
  --slate-200: #c3cdd6;
  --slate-300: #9dabb8;
  --slate-400: #7a8c9c;
  --slate-500: #5b6b7a;
  --slate-600: #3f4f60;
  --slate-700: #2f3d4e;
  --slate-800: #243040;
  --slate-900: #1b252f;
  --slate-950: #111820;
  --white: #ffffff;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
}
:root {
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;
  --streep-w: 4px;
  --streep-w-lg: 6px;
  --border-w: 1px;
  --border-w-strong: 2px;
  --focus-w: 2px;
  --focus-offset: 2px;
  --icon-stroke: 2px;
  --container-max: 1200px;
  --content-max: 720px;
  --topbar-h: 56px;
  --sidebar-w: 260px;
  --control-h: 40px;
  --grid-gutter: 24px;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-wdth-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
.display-xl { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: 64px; line-height: 64px; font-weight: 800; letter-spacing: -0.02em; }
.display { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: 48px; line-height: 52px; font-weight: 800; letter-spacing: -0.02em; }
.display-sm { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: 36px; line-height: 40px; font-weight: 800; letter-spacing: -0.015em; }
.h1 { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.01em; }
.h2 { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.h3 { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: 20px; line-height: 28px; font-weight: 600; }
.h4 { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 24px; font-weight: 600; }
.lead { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: 20px; line-height: 30px; font-weight: 400; }
.body { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; }
.body-strong { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 24px; font-weight: 600; }
.body-sm { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 20px; font-weight: 400; }
.caption { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: 12px; line-height: 16px; font-weight: 500; }
.overline { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; }
.data-xl { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.02em; }
.data-lg { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: 24px; line-height: 28px; font-weight: 600; }
.data { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 24px; font-weight: 500; }
.data-sm { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 20px; font-weight: 500; }