/* @valtracs/ui-kit 1.0.0 -- tokens. De bron is --vts-*; de --vt-*-namen zijn aliassen.
   GEGENEREERD door scripts/export-suite-tokens.ts uit app/styles/valtracs-tokens.css. NIET BEWERKEN:
   pas de bron aan en draai het script opnieuw. app/styles/suite-tokens.export.test.ts laat falen als dit bestand afwijkt.
   Licht staat op :root. Donker staat twee keer, zoals in de bron: onder prefers-color-scheme voor wie nooit koos, en onder
   [data-theme="dark"] zodat een schakelaar in beide richtingen wint (zet het attribuut op <html>; niets gestempeld = het
   besturingssysteem beslist). De --vt-*-aliassen staan alleen op :root en volgen het thema vanzelf. Een product laadt dit
   bestand een keer, daarna styles.css, en overschrijft nooit lokaal een --vt-* of --vts-* token. Migratie: MIGRATION-1.0.md. */

:root {
  --vts-neutral-0: #ffffff;
  --vts-neutral-25: #f3f7fc;
  --vts-neutral-50: #f7fafe;
  --vts-neutral-100: #edf3fa;
  --vts-neutral-200: #e4ebf5;
  --vts-neutral-300: #d4dfed;
  --vts-neutral-400: #9aaac0;
  --vts-neutral-500: #58708d;
  --vts-neutral-600: #4d627f;
  --vts-neutral-700: #34496a;
  --vts-neutral-800: #1f3856;
  --vts-neutral-900: #122b46;
  --vts-bg-canvas: #f3f7fc;
  --vts-bg-surface: #ffffff;
  --vts-bg-surface-subtle: #f7fafe;
  --vts-bg-sunken: #edf3fa;
  --vts-bg-sidebar: linear-gradient(155deg, var(--vts-sidebar-start), var(--vts-sidebar-end));
  --vts-bg-hover: rgba(18, 43, 70, 0.05);
  --vts-bg-pressed: rgba(18, 43, 70, 0.09);
  --vts-bg-overlay: rgba(18, 43, 70, 0.45);
  --vts-sidebar-start: #102a43;
  --vts-sidebar-end: #0d2238;
  --vts-sidebar-text: #ffffff;
  --vts-sidebar-text-nav: #c9d8ea;
  --vts-sidebar-text-muted: #9fb4cf;
  --vts-sidebar-hover: rgba(255, 255, 255, 0.08);
  --vts-sidebar-pressed: rgba(255, 255, 255, 0.14);
  --vts-sidebar-line: rgba(255, 255, 255, 0.12);
  --vts-sidebar-active: linear-gradient(155deg, #214e7d, #1c4068);
  --vts-sidebar-focus: #9cc4f2;
  --vts-sidenav-radius: 18px;
  --vts-logo-tile: #edf3fa;
  --vts-logo-tile-ink: #4d627f;
  --vts-text: #122b46;
  --vts-text-secondary: #4d627f;
  --vts-text-muted: #58708d;
  --vts-text-disabled: #8093ab;
  --vts-text-inverse: #ffffff;
  --vts-border-width: 1px;
  --vts-border-subtle: #eef3fa;
  --vts-border: #e4ebf5;
  --vts-border-strong: #d4dfed;
  --vts-accent: #204f83;
  --vts-accent-hover: #285d98;
  --vts-accent-pressed: #183e68;
  --vts-accent-text: #204f83;
  --vts-accent-surface: #eaf2fc;
  --vts-accent-surface-hover: #dce9f9;
  --vts-accent-border: #b9d0ec;
  --vts-on-accent: #ffffff;
  --vts-accent-fill: #204f83;
  --vts-accent-fill-hover: #285d98;
  --vts-accent-fill-pressed: #183e68;
  --vts-primary-gradient: linear-gradient(135deg, #285d98, #183e68);
  --vts-primary-gradient-hover: linear-gradient(135deg, #2f68a6, #1d4776);
  --vts-primary-gradient-pressed: linear-gradient(135deg, #204f83, #123257);
  --vts-primary-shadow: 0 3px 8px #24558c1a;
  --vts-success: #0f7a4d;
  --vts-success-text: #0f7a4d;
  --vts-success-surface: #e9f6ef;
  --vts-success-border: #bde0cd;
  --vts-attention: #8a5a00;
  --vts-attention-text: #8a5a00;
  --vts-attention-surface: #fdf3de;
  --vts-attention-border: #edd6a4;
  --vts-critical: #c8341a;
  --vts-critical-text: #c8341a;
  --vts-critical-surface: #fdeceb;
  --vts-critical-border: #f3c4be;
  --vts-critical-fill: #c8341a;
  --vts-critical-fill-hover: #b12d16;
  --vts-on-critical: #ffffff;
  --vts-agent: #6b37cc;
  --vts-agent-text: #6b37cc;
  --vts-agent-surface: #f2ecfe;
  --vts-agent-border: #ddcbf8;
  --vts-neutral-text: #4d627f;
  --vts-neutral-surface: #edf3fa;
  --vts-neutral-border: #e4ebf5;
  --vts-brand-start: #6f8eff;
  --vts-brand-end: #8d4dff;
  --vts-brand-gradient: linear-gradient(135deg, var(--vts-brand-start), var(--vts-brand-end));
  --vts-agent-hue-a: #5b53d6;
  --vts-agent-hue-b: #8a3fbf;
  --vts-agent-hue-c: #2f6f9e;
  --vts-agent-hue-d: #9c3f7a;
  --vts-agent-hue-e: #46707a;
  --vts-agent-hue-f: #7a4bb8;
  --vts-subject-teal-text: #0e6a78;
  --vts-subject-teal-surface: #e6f4f6;
  --vts-subject-rose-text: #a83a64;
  --vts-subject-rose-surface: #fbecf1;
  --vts-chip-blue-bg: #e4efff;
  --vts-chip-blue-fg: #2972d3;
  --vts-chip-purple-bg: #eee7ff;
  --vts-chip-purple-fg: #7e54d7;
  --vts-chip-green-bg: #e4f7ef;
  --vts-chip-green-fg: #1a9f7e;
  --vts-chip-orange-bg: #fff0d8;
  --vts-chip-orange-fg: #eb980c;
  --vts-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --vts-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --vts-text-2xs: 11px;
  --vts-text-xs: 12px;
  --vts-text-sm: 13px;
  --vts-text-md: 14px;
  --vts-text-lg: 16px;
  --vts-text-xl: 20px;
  --vts-text-2xl: 24px;
  --vts-text-3xl: 30px;
  --vts-text-4xl: 38px;
  --vts-leading-tight: 1.2;
  --vts-leading-snug: 1.35;
  --vts-leading-normal: 1.5;
  --vts-leading-relaxed: 1.65;
  --vts-weight-regular: 400;
  --vts-weight-medium: 500;
  --vts-weight-semibold: 600;
  --vts-weight-bold: 700;
  --vts-tracking-tight: -0.02em;
  --vts-tracking-normal: 0;
  --vts-tracking-caps: 0.06em;
  --vts-tracking-eyebrow: 0.13em;
  --vts-type-h1: 700 34px / 1.12 var(--vts-font-sans);
  --vts-tracking-h1: -0.045em;
  --vts-font-numeric: "tnum" 1, "lnum" 1;
  --vts-type-page-title: var(--vts-weight-semibold) var(--vts-text-2xl) / var(--vts-leading-tight) var(--vts-font-sans);
  --vts-type-section-title: var(--vts-weight-semibold) var(--vts-text-xl) / var(--vts-leading-snug) var(--vts-font-sans);
  --vts-type-section-title-sm: var(--vts-weight-semibold) var(--vts-text-lg) / var(--vts-leading-snug) var(--vts-font-sans);
  --vts-type-object-title: var(--vts-weight-semibold) var(--vts-text-md) / var(--vts-leading-snug) var(--vts-font-sans);
  --vts-type-body: var(--vts-weight-regular) var(--vts-text-md) / var(--vts-leading-normal) var(--vts-font-sans);
  --vts-type-supporting: var(--vts-weight-regular) var(--vts-text-sm) / var(--vts-leading-normal) var(--vts-font-sans);
  --vts-type-metadata: var(--vts-weight-regular) var(--vts-text-xs) / var(--vts-leading-snug) var(--vts-font-sans);
  --vts-type-eyebrow: var(--vts-weight-semibold) var(--vts-text-2xs) / var(--vts-leading-snug) var(--vts-font-sans);
  --vts-type-kpi: var(--vts-weight-semibold) var(--vts-text-4xl) / var(--vts-leading-tight) var(--vts-font-sans);
  --vts-type-kpi-sm: var(--vts-weight-semibold) var(--vts-text-2xl) / var(--vts-leading-tight) var(--vts-font-sans);
  --vts-reading-max: 72ch;
  --vts-space-1: 4px;
  --vts-space-2: 8px;
  --vts-space-3: 12px;
  --vts-space-4: 16px;
  --vts-space-5: 24px;
  --vts-space-6: 32px;
  --vts-space-7: 40px;
  --vts-space-8: 48px;
  --vts-space-9: 64px;
  --vts-space-10: 80px;
  --vts-radius-xs: 4px;
  --vts-radius-sm: 6px;
  --vts-radius-md: 10px;
  --vts-radius-lg: 14px;
  --vts-radius-pill: 999px;
  --vts-shadow-none: none;
  --vts-shadow-xs: 0 1px 2px rgba(18, 43, 70, 0.05);
  --vts-shadow-sm: 0 1px 3px rgba(18, 43, 70, 0.07), 0 1px 2px rgba(18, 43, 70, 0.04);
  --vts-shadow-overlay: 0 12px 32px rgba(18, 43, 70, 0.16), 0 2px 8px rgba(18, 43, 70, 0.08);
  --vts-shadow-card: 0 5px 22px #25456904;
  --vts-shadow-sidebar: 0 10px 30px rgba(16, 42, 67, 0.18);
  --vts-focus-color: var(--vts-accent);
  --vts-focus-ring: 0 0 0 2px var(--vts-bg-surface), 0 0 0 4px var(--vts-focus-color);
  --vts-focus-ring-inset: inset 0 0 0 2px var(--vts-focus-color);
  --vts-sidenav-card-width: 260px;
  --vts-sidenav-gap: 12px;
  --vts-sidenav-width: calc(var(--vts-sidenav-card-width) + 2 * var(--vts-sidenav-gap));
  --vts-sidenav-width-compact: 64px;
  --vts-topbar-height: 60px;
  --vts-page-max: 1360px;
  --vts-aside-width: 380px;
  --vts-page-gutter: var(--vts-space-6);
  --vts-section-gap: var(--vts-space-7);
  --vts-content-gap: var(--vts-space-4);
  --vts-duration-fast: 120ms;
  --vts-duration-base: 180ms;
  --vts-ease: cubic-bezier(0.2, 0, 0.13, 1);
  --vts-z-sticky: 10;
  --vts-z-overlay: 100;

  /* ---- --vt-*: de namen van kit 0.x, als verwijzing naar de bron hierboven ---- */
  /* Oppervlakken.
     Canvas licht ONDER het vlak, donker er net boven: blokken scheiden met een rand, niet met een
     schaduw. bg-code heeft geen --vts-tegenhanger en volgt het donkere merkvlak van de zijbalk (donker
     in beide thema's). */
  --vt-bg-page: var(--vts-bg-canvas);
  --vt-bg-sidebar: var(--vts-bg-sidebar);
  --vt-bg-surface: var(--vts-bg-surface);
  --vt-bg-surface-subtle: var(--vts-bg-surface-subtle);
  --vt-bg-code: var(--vts-sidebar-end);

  /* Tekst */
  --vt-text-primary: var(--vts-text);
  --vt-text-secondary: var(--vts-text-secondary);
  --vt-text-muted: var(--vts-text-muted);
  --vt-text-on-accent: var(--vts-on-accent);
  --vt-text-code: var(--vts-sidebar-text-nav);

  /* Randen */
  --vt-border: var(--vts-border);
  --vt-border-subtle: var(--vts-border-subtle);

  /* Accent (blauw = actie, nooit een oordeel).
     accent-solid is de accentkleur voor tekst, lijnen, ringen en balken (de tekstvariant). accent-start
     en accent-end waren het merkverloop (paars) en zijn nu de twee stops van het primaire verloop.
     accent-fill is het vlak dat tekst draagt: --vt-text-on-accent erop haalt 4,5:1 in beide thema's. */
  --vt-accent-solid: var(--vts-accent-text);
  --vt-accent-start: var(--vts-accent-fill-hover);
  --vt-accent-end: var(--vts-accent-fill-pressed);
  --vt-accent-fill: var(--vts-accent-fill);
  --vt-accent-fill-hover: var(--vts-accent-fill-hover);
  --vt-accent-fill-pressed: var(--vts-accent-fill-pressed);
  --vt-accent-surface: var(--vts-accent-surface);
  --vt-accent-surface-hover: var(--vts-accent-surface-hover);

  /* Oordelen.
     Groen betekent GOED, rood RISICO, amber AANDACHT (nooit omhoog of omlaag). info was 'concept,
     gepland' en is nu het neutrale paar: blauw is actie en nooit een oordeel. */
  --vt-success: var(--vts-success-text);
  --vt-success-surface: var(--vts-success-surface);
  --vt-critical: var(--vts-critical-text);
  --vt-critical-surface: var(--vts-critical-surface);
  --vt-attention: var(--vts-attention-text);
  --vt-attention-surface: var(--vts-attention-surface);
  --vt-info: var(--vts-neutral-text);
  --vt-info-surface: var(--vts-neutral-surface);

  /* Zijbalk (het gradientvlak van de suite, in beide thema's donker).
     Nieuw in 1.0.0 onder --vt-*: Message kende --vt-sidebar-text, -active en -line al in zijn eigen
     brand.css. */
  --vt-sidebar-text: var(--vts-sidebar-text-nav);
  --vt-sidebar-text-strong: var(--vts-sidebar-text);
  --vt-sidebar-text-muted: var(--vts-sidebar-text-muted);
  --vt-sidebar-hover: var(--vts-sidebar-hover);
  --vt-sidebar-pressed: var(--vts-sidebar-pressed);
  --vt-sidebar-line: var(--vts-sidebar-line);
  --vt-sidebar-active: var(--vts-sidebar-active);
  --vt-sidebar-focus: var(--vts-sidebar-focus);

  /* Schaduw, radius, ruimte.
     Radius volgt de --vts-schaal (6, 10 en 14 px; de oude 8, 12 en 20 vervallen). shadow-card is het
     bijna onzichtbare kaartspoor van de suite (licht) en 'none' (donker): de rand scheidt.
     shadow-popover is de overlay. */
  --vt-shadow-card: var(--vts-shadow-card);
  --vt-shadow-popover: var(--vts-shadow-overlay);
  --vt-radius-sm: var(--vts-radius-sm);
  --vt-radius-md: var(--vts-radius-md);
  --vt-radius-lg: var(--vts-radius-lg);
  --vt-radius-pill: var(--vts-radius-pill);
  --vt-space-1: var(--vts-space-1);
  --vt-space-2: var(--vts-space-2);
  --vt-space-3: var(--vts-space-3);
  --vt-space-4: var(--vts-space-4);
  --vt-space-5: var(--vts-space-5);
  --vt-space-6: var(--vts-space-6);

  /* Een data-URI kan geen currentColor lezen; de streek is --vts-text-muted van het thema. */
  --vt-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2358708d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vts-neutral-0: #0b1826;
    --vts-neutral-25: #0e1e31;
    --vts-neutral-50: #11233a;
    --vts-neutral-100: #162d49;
    --vts-neutral-200: #1e3652;
    --vts-neutral-300: #2a4768;
    --vts-neutral-400: #56708f;
    --vts-neutral-500: #95a9c1;
    --vts-neutral-600: #a9bcd3;
    --vts-neutral-700: #c4d3e5;
    --vts-neutral-800: #d6e2f0;
    --vts-neutral-900: #e3ecf7;
    --vts-bg-canvas: #0b1826;
    --vts-bg-surface: #11233a;
    --vts-bg-surface-subtle: #162d49;
    --vts-bg-sunken: #0e1e31;
    --vts-bg-sidebar: linear-gradient(155deg, var(--vts-sidebar-start), var(--vts-sidebar-end));
    --vts-sidebar-start: #0a1726;
    --vts-sidebar-end: #081320;
    --vts-sidebar-active: linear-gradient(155deg, #1d4670, #173a5e);
    --vts-bg-hover: rgba(227, 236, 247, 0.06);
    --vts-bg-pressed: rgba(227, 236, 247, 0.1);
    --vts-bg-overlay: rgba(0, 0, 0, 0.6);
    --vts-logo-tile: #c4d3e5;
    --vts-logo-tile-ink: #34496a;
    --vts-text: #e3ecf7;
    --vts-text-secondary: #a9bcd3;
    --vts-text-muted: #95a9c1;
    --vts-text-disabled: #6f86a1;
    --vts-text-inverse: #0b1826;
    --vts-border-subtle: #182d47;
    --vts-border: #1e3652;
    --vts-border-strong: #2a4768;
    --vts-accent: #7fb0e8;
    --vts-accent-hover: #98c0ef;
    --vts-accent-pressed: #b0d0f4;
    --vts-accent-text: #9cc4f2;
    --vts-accent-surface: rgba(127, 176, 232, 0.16);
    --vts-accent-surface-hover: rgba(127, 176, 232, 0.24);
    --vts-accent-border: rgba(127, 176, 232, 0.36);
    --vts-on-accent: #ffffff;
    --vts-accent-fill: #2f6bb0;
    --vts-accent-fill-hover: #3573b8;
    --vts-accent-fill-pressed: #2a609f;
    --vts-primary-gradient: linear-gradient(135deg, #3573b8, #25588f);
    --vts-primary-gradient-hover: linear-gradient(135deg, #3676bd, #2a6199);
    --vts-primary-gradient-pressed: linear-gradient(135deg, #2f6bb0, #1f4c7c);
    --vts-primary-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
    --vts-success: #3fbd80;
    --vts-success-text: #4fd18d;
    --vts-success-surface: rgba(79, 209, 141, 0.14);
    --vts-success-border: rgba(79, 209, 141, 0.32);
    --vts-attention: #d9a441;
    --vts-attention-text: #efbf5e;
    --vts-attention-surface: rgba(239, 191, 94, 0.14);
    --vts-attention-border: rgba(239, 191, 94, 0.3);
    --vts-critical: #e8604f;
    --vts-critical-text: #ff8577;
    --vts-critical-surface: rgba(255, 133, 119, 0.14);
    --vts-critical-border: rgba(255, 133, 119, 0.3);
    --vts-critical-fill: #d1412a;
    --vts-critical-fill-hover: #c83a22;
    --vts-on-critical: #ffffff;
    --vts-agent: #a684f5;
    --vts-agent-text: #c1a4ff;
    --vts-agent-surface: rgba(193, 164, 255, 0.14);
    --vts-agent-border: rgba(193, 164, 255, 0.3);
    --vts-neutral-text: #a9bcd3;
    --vts-neutral-surface: #162d49;
    --vts-neutral-border: #1e3652;
    --vts-agent-hue-a: #98a0ff;
    --vts-agent-hue-b: #cf93f0;
    --vts-agent-hue-c: #74bbe8;
    --vts-agent-hue-d: #ef92c4;
    --vts-agent-hue-e: #7fc8cf;
    --vts-agent-hue-f: #bd9bf0;
    --vts-subject-teal-text: #63c8d8;
    --vts-subject-teal-surface: rgba(99, 200, 216, 0.14);
    --vts-subject-rose-text: #f291b3;
    --vts-subject-rose-surface: rgba(242, 145, 179, 0.14);
    --vts-shadow-card: none;
    --vts-shadow-sidebar: 0 10px 30px rgba(0, 0, 0, 0.45);
    --vts-chip-blue-bg: rgba(127, 176, 232, 0.16);
    --vts-chip-blue-fg: #7fb0e8;
    --vts-chip-purple-bg: rgba(183, 156, 240, 0.16);
    --vts-chip-purple-fg: #b79cf0;
    --vts-chip-green-bg: rgba(79, 209, 168, 0.14);
    --vts-chip-green-fg: #4fd1a8;
    --vts-chip-orange-bg: rgba(242, 181, 82, 0.15);
    --vts-chip-orange-fg: #f2b552;
    --vts-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --vts-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    --vts-shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
    --vt-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2395a9c1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

:root[data-theme="dark"] {
  --vts-neutral-0: #0b1826;
  --vts-neutral-25: #0e1e31;
  --vts-neutral-50: #11233a;
  --vts-neutral-100: #162d49;
  --vts-neutral-200: #1e3652;
  --vts-neutral-300: #2a4768;
  --vts-neutral-400: #56708f;
  --vts-neutral-500: #95a9c1;
  --vts-neutral-600: #a9bcd3;
  --vts-neutral-700: #c4d3e5;
  --vts-neutral-800: #d6e2f0;
  --vts-neutral-900: #e3ecf7;
  --vts-bg-canvas: #0b1826;
  --vts-bg-surface: #11233a;
  --vts-bg-surface-subtle: #162d49;
  --vts-bg-sunken: #0e1e31;
  --vts-bg-sidebar: linear-gradient(155deg, var(--vts-sidebar-start), var(--vts-sidebar-end));
  --vts-sidebar-start: #0a1726;
  --vts-sidebar-end: #081320;
  --vts-sidebar-active: linear-gradient(155deg, #1d4670, #173a5e);
  --vts-bg-hover: rgba(227, 236, 247, 0.06);
  --vts-bg-pressed: rgba(227, 236, 247, 0.1);
  --vts-bg-overlay: rgba(0, 0, 0, 0.6);
  --vts-logo-tile: #c4d3e5;
  --vts-logo-tile-ink: #34496a;
  --vts-text: #e3ecf7;
  --vts-text-secondary: #a9bcd3;
  --vts-text-muted: #95a9c1;
  --vts-text-disabled: #6f86a1;
  --vts-text-inverse: #0b1826;
  --vts-border-subtle: #182d47;
  --vts-border: #1e3652;
  --vts-border-strong: #2a4768;
  --vts-accent: #7fb0e8;
  --vts-accent-hover: #98c0ef;
  --vts-accent-pressed: #b0d0f4;
  --vts-accent-text: #9cc4f2;
  --vts-accent-surface: rgba(127, 176, 232, 0.16);
  --vts-accent-surface-hover: rgba(127, 176, 232, 0.24);
  --vts-accent-border: rgba(127, 176, 232, 0.36);
  --vts-on-accent: #ffffff;
  --vts-accent-fill: #2f6bb0;
  --vts-accent-fill-hover: #3573b8;
  --vts-accent-fill-pressed: #2a609f;
  --vts-primary-gradient: linear-gradient(135deg, #3573b8, #25588f);
  --vts-primary-gradient-hover: linear-gradient(135deg, #3676bd, #2a6199);
  --vts-primary-gradient-pressed: linear-gradient(135deg, #2f6bb0, #1f4c7c);
  --vts-primary-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  --vts-success: #3fbd80;
  --vts-success-text: #4fd18d;
  --vts-success-surface: rgba(79, 209, 141, 0.14);
  --vts-success-border: rgba(79, 209, 141, 0.32);
  --vts-attention: #d9a441;
  --vts-attention-text: #efbf5e;
  --vts-attention-surface: rgba(239, 191, 94, 0.14);
  --vts-attention-border: rgba(239, 191, 94, 0.3);
  --vts-critical: #e8604f;
  --vts-critical-text: #ff8577;
  --vts-critical-surface: rgba(255, 133, 119, 0.14);
  --vts-critical-border: rgba(255, 133, 119, 0.3);
  --vts-critical-fill: #d1412a;
  --vts-critical-fill-hover: #c83a22;
  --vts-on-critical: #ffffff;
  --vts-agent: #a684f5;
  --vts-agent-text: #c1a4ff;
  --vts-agent-surface: rgba(193, 164, 255, 0.14);
  --vts-agent-border: rgba(193, 164, 255, 0.3);
  --vts-neutral-text: #a9bcd3;
  --vts-neutral-surface: #162d49;
  --vts-neutral-border: #1e3652;
  --vts-agent-hue-a: #98a0ff;
  --vts-agent-hue-b: #cf93f0;
  --vts-agent-hue-c: #74bbe8;
  --vts-agent-hue-d: #ef92c4;
  --vts-agent-hue-e: #7fc8cf;
  --vts-agent-hue-f: #bd9bf0;
  --vts-subject-teal-text: #63c8d8;
  --vts-subject-teal-surface: rgba(99, 200, 216, 0.14);
  --vts-subject-rose-text: #f291b3;
  --vts-subject-rose-surface: rgba(242, 145, 179, 0.14);
  --vts-shadow-card: none;
  --vts-shadow-sidebar: 0 10px 30px rgba(0, 0, 0, 0.45);
  --vts-chip-blue-bg: rgba(127, 176, 232, 0.16);
  --vts-chip-blue-fg: #7fb0e8;
  --vts-chip-purple-bg: rgba(183, 156, 240, 0.16);
  --vts-chip-purple-fg: #b79cf0;
  --vts-chip-green-bg: rgba(79, 209, 168, 0.14);
  --vts-chip-green-fg: #4fd1a8;
  --vts-chip-orange-bg: rgba(242, 181, 82, 0.15);
  --vts-chip-orange-fg: #f2b552;
  --vts-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --vts-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  --vts-shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
  --vt-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2395a9c1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}