/* KliXplan design tokens · huisstijl "Scandinavisch eenvoudig" · v0.2 · 29 oktober 2026
   Merkkleur Fjord. Logokleuren: variant "Fjord met koraalpunt" (concept).
   Light is de standaard. Dark via [data-theme="dark"] of systeemvoorkeur. */
:root {
  --kx-bg: #F7F8F6;
  --kx-surface: #FFFFFF;
  --kx-surface-2: #EEF1EC;
  --kx-line: #DFE4DD;
  --kx-fg: #2E2F2C;
  --kx-muted: #646A60;
  --kx-brand: #1F5C68;
  --kx-brand-ink: #1A4F5A;
  --kx-brand-soft: #E2EEF0;
  --kx-brand-tint: #D3E6E9;
  --kx-on-brand: #FFFFFF;
  --kx-ok: #346C43;
  --kx-ok-soft: #E1EEDF;
  --kx-warn: #94590A;
  --kx-warn-soft: #F6E8D2;
  --kx-bad: #B03A2E;
  --kx-bad-soft: #F6DFDA;
  --kx-info: #4A5F8A;
  --kx-info-soft: #E3E8F1;
  --kx-logo-box: #1F5C68;
  --kx-logo-route-under: #FFFFFF;
  --kx-logo-route-over: #FFFFFF;
  --kx-logo-dot: #E8573F;
  --kx-logo-text: #2E2F2C;
  --kx-logo-x: #1F5C68;
  --kx-font-sans: "Manrope", "Segoe UI", system-ui, sans-serif;
  --kx-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --kx-text-display: 800 40px/1.1 var(--kx-font-sans);
  --kx-text-h1: 800 32px/1.15 var(--kx-font-sans);
  --kx-text-h2: 800 24px/1.2 var(--kx-font-sans);
  --kx-text-h3: 700 19px/1.3 var(--kx-font-sans);
  --kx-text-body: 400 15px/1.55 var(--kx-font-sans);
  --kx-text-table: 400 13.5px/1.45 var(--kx-font-sans);
  --kx-text-small: 500 12.5px/1.45 var(--kx-font-sans);
  --kx-text-label: 600 12px/1.3 var(--kx-font-sans); /* hoofdletters, letter-spacing .09em */
  --kx-text-id: 500 12.5px/1.4 var(--kx-font-mono);
  --kx-space-1: 4px; --kx-space-2: 8px; --kx-space-3: 12px; --kx-space-4: 16px; --kx-space-5: 20px;
  --kx-space-6: 24px; --kx-space-8: 32px; --kx-space-10: 40px; --kx-space-12: 48px; --kx-space-16: 64px;
  --kx-radius-sm: 6px; --kx-radius-md: 10px; --kx-radius-lg: 14px; --kx-radius-xl: 18px; --kx-radius-pill: 999px;
  --kx-shadow-sm: 0 1px 2px rgba(46,47,44,.05);
  --kx-shadow-md: 0 1px 2px rgba(46,47,44,.05), 0 10px 30px rgba(46,47,44,.06);
  --kx-focus: 0 0 0 2px var(--kx-bg), 0 0 0 4px var(--kx-brand);
  --kx-motion-fast: 120ms;   /* hover, focus */
  --kx-motion-base: 240ms;   /* statuswissel, paneel open */
  --kx-motion-slow: 600ms;   /* meter, route */
  --kx-motion-count: 1200ms; /* getal of infographic opbouwen */
  --kx-ease-out: cubic-bezier(.2,.7,.2,1);
  --kx-ease-in-out: cubic-bezier(.45,0,.2,1);
  --kx-ease-pop: cubic-bezier(.3,1.7,.5,1); /* alleen eindpunt van het logo en stations */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kx-bg: #171816;
    --kx-surface: #1F211E;
    --kx-surface-2: #272A26;
    --kx-line: #363A33;
    --kx-fg: #EEF1EC;
    --kx-muted: #A3A89D;
    --kx-brand: #7CC0CB;
    --kx-brand-ink: #A8D7DE;
    --kx-brand-soft: #1C3236;
    --kx-brand-tint: #21393D;
    --kx-on-brand: #10262A;
    --kx-ok: #7DC08C;
    --kx-ok-soft: #1E3122;
    --kx-warn: #E3A857;
    --kx-warn-soft: #3A2C15;
    --kx-bad: #EE8A7E;
    --kx-bad-soft: #3D1F1B;
    --kx-info: #9DB0DA;
    --kx-info-soft: #232B3D;
    --kx-logo-box: #7CC0CB;
    --kx-logo-route-under: #10262A;
    --kx-logo-route-over: #10262A;
    --kx-logo-dot: #E8573F;
    --kx-logo-text: #EEF1EC;
    --kx-logo-x: #7CC0CB;
    --kx-shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --kx-shadow-md: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --kx-bg: #171816;
  --kx-surface: #1F211E;
  --kx-surface-2: #272A26;
  --kx-line: #363A33;
  --kx-fg: #EEF1EC;
  --kx-muted: #A3A89D;
  --kx-brand: #7CC0CB;
  --kx-brand-ink: #A8D7DE;
  --kx-brand-soft: #1C3236;
  --kx-brand-tint: #21393D;
  --kx-on-brand: #10262A;
  --kx-ok: #7DC08C;
  --kx-ok-soft: #1E3122;
  --kx-warn: #E3A857;
  --kx-warn-soft: #3A2C15;
  --kx-bad: #EE8A7E;
  --kx-bad-soft: #3D1F1B;
  --kx-info: #9DB0DA;
  --kx-info-soft: #232B3D;
  --kx-logo-box: #7CC0CB;
  --kx-logo-route-under: #10262A;
  --kx-logo-route-over: #10262A;
  --kx-logo-dot: #E8573F;
  --kx-logo-text: #EEF1EC;
  --kx-logo-x: #7CC0CB;
  --kx-shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --kx-shadow-md: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.25);
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) {
  :root { --kx-motion-fast: 0ms; --kx-motion-base: 0ms; --kx-motion-slow: 0ms; --kx-motion-count: 0ms; }
}