/* Auto-generated by the design system editor — do not edit by hand */
:root {
  --color-surface-1: #0a0a16;
  --color-surface-3: #11111f;
  --color-surface-5: #1e1e2d;
  --color-text-2: #b9b9cf;
  --color-text-5: #e2e2f0;
  --color-text-6: #f0f0fa;
  --color-accent-tint-1: rgba(77,124,254,0.06);
  --color-accent-tint-2: rgba(77,124,254,0.08);
  --color-accent-tint-3: rgba(77,124,254,0.12);
  --color-accent-border: rgba(77,124,254,0.4);
  --color-status-blue: #60a5fa;
  --color-status-red: #f87171;
  --color-status-green: #34d399;
  --color-status-amber: #fbbf24;
  --color-status-orange: #fb923c;
  --color-status-white: #e5e7eb;
  --color-surface-0: #030712;
  --color-modal-overlay: rgba(0,0,0,0.65);
  --color-header-bg: rgba(7,7,15,0.95);
  --color-stripe: rgba(17,17,31,0.5);
  --color-accent-dark-tint-1: rgba(47,79,221,0.08);
  --color-accent-dark-tint-2: rgba(47,79,221,0.1);
  --color-accent-dark-tint-3: rgba(47,79,221,0.15);
  --color-donate: #c9a84c;
  --color-donate-bright: #ddb95a;
  --color-donate-tint-1: rgba(201,168,76,0.08);
  --color-donate-tint-2: rgba(201,168,76,0.3);
  --color-donate-tint-3: rgba(201,168,76,0.5);
  --color-donate-shimmer: rgba(255,220,120,0.18);
  --color-status-red-tint-2: rgba(248,113,113,0.18);
  --color-status-red-tint-3: rgba(248,113,113,0.35);
  --color-status-green-tint-1: rgba(52,211,153,0.08);
  --color-status-green-tint-2: rgba(52,211,153,0.15);
  --color-status-green-tint-3: rgba(52,211,153,0.5);
  --color-status-amber-tint-1: rgba(251,191,36,0.12);
  --color-status-blue-tint-2: rgba(96,165,250,0.15);
  --color-status-blue-tint-3: rgba(96,165,250,0.35);
  --color-status-purple: #a855f7;
  --color-overlay: rgba(10,10,22,0.92);
  --color-fg: #ffffff;
  /* Semantic category palette — Compare-page subsystem identity colors.
     Distinct from --color-status-* (which encode value severity) — these
     encode tuning-domain categories. */
  --color-cat-fuel:    #3b82f6;
  --color-cat-boost:   #8b5cf6;
  --color-cat-timing:  #ef4444;
  --color-cat-torque:  #f97316;
  --color-cat-idle:    var(--color-status-green);
  --color-cat-lambda:  #06b6d4;
  --color-cat-tcu:     #ec4899;
  --color-cat-misc:    var(--color-text-1);
  --spacing-0px: 0px;
  --spacing-2px: 2px;
  --spacing-3px: 3px;
  --spacing-4px: 4px;
  --spacing-5px: 5px;
  --spacing-6px: 6px;
  --spacing-8px: 8px;
  --spacing-10px: 10px;
  --spacing-12px: 12px;
  --spacing-16px: 16px;
  --spacing-24px: 24px;
  --spacing-32px: 32px;
  --spacing-48px: 48px;
  /* Scrollbar widths (used by ::-webkit-scrollbar { width: … }) */
  --scrollbar-width-thick: 8px;
  --scrollbar-width-thin:  5px;
  --spacing-64px: 64px;
  --spacing-96px: 96px;
  --radius-2px: 2px;
  --radius-6px: 6px;
  --radius-8px: 8px;
  --radius-10px: 10px;
  --radius-48px: 48px;
  --font-family-manrope: 'Manrope', sans-serif;
  --font-size-7px: 7px;
  --font-size-8px: 8px;
  --font-size-9px: 9px;
  --font-size-10px: 10px;
  --font-size-11px: 11px;
  --font-size-12px: 12px;
  --font-size-14px: 14px;
  --font-size-16px: 16px;
  --font-size-18px: 18px;
  --font-size-21px: 21px;
  --font-size-24px: 24px;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-700: 700;
  --font-leading-1.0: 1;
  --font-leading-1.2: 1.2;
  --font-leading-1.3: 1.3;
  --font-leading-1.4: 1.4;
  --font-leading-1.5: 1.5;
  --font-leading-2.0: 2;
  --font-tracking-0em: 0em;
  --font-tracking-+0.025em: 0.025em;
  --font-tracking-+0.05em: 0.05em;
  --font-tracking-+0.075em: 0.075em;
  --font-tracking-+0.1em: 0.1em;
  --font-tracking--0.025em: -0.025em;
  --font-tracking--0.05em: -0.05em;
  --chart-header-bg: var(--color-surface-2);
  --sl-stepper-size: 20px;
  --la-max-width: 1600px;
  --la-left-width: 300px;
  --la-center-width: 450px;
  --la-col-height: calc(100vh - 100px);
  --la-drop-zone-offset: 60px;
  --la-chart-height: 150px;
  --la-chart-height-gg: 280px;
  --la-center-height-mobile: 400px;
  --la-dot-size: 8px;
  --la-stepper-size: 20px;
  --la-card-stats-maxh: 60px;
  --color-surface-2: #0c0c18;
  --color-surface-4: #141424;
  --color-border-1: #1b1d2c;
  --color-border-2: #242437;
  --color-border-3: #373752;
  --color-text-1: #6d6d83;
  --color-text-3: #b1b1d3;
  --color-text-4: #d0d0f0;
  --color-accent: #2f4fdd;
  --color-accent-bright: #4d7cfe;
  --ctrl-height: 24px;
  --radius-4px: 4px;
  --ctrl-font-size: var(--font-size-9px);
  --font-weight-600: 600;
  --ctrl-pad-x: 8px;
  --type-h1-size: var(--font-size-21px);
  --type-h1-weight: var(--font-weight-700);
  --type-h1-color: var(--color-text-6);
  --type-h1-leading: var(--font-leading-1.3);
  --type-h1-tracking: var(--font-tracking-0em);
  --type-h2-size: var(--font-size-16px);
  --type-h2-weight: var(--font-weight-600);
  --type-h2-color: var(--color-text-5);
  --type-h2-leading: var(--font-leading-1.3);
  --type-h2-tracking: var(--font-tracking-0em);
  --type-body-size: var(--font-size-12px);
  --type-body-weight: var(--font-weight-600);
  --type-body-color: var(--color-text-4);
  --type-body-leading: var(--font-leading-1.4);
  --type-body-tracking: var(--font-tracking-0em);
  --type-meta-size: var(--font-size-11px);
  --type-meta-weight: var(--font-weight-500);
  --type-meta-color: var(--color-text-2);
  --type-meta-leading: var(--font-leading-1.4);
  --type-meta-tracking: var(--font-tracking-0em);
  --type-ctrl-size: var(--font-size-9px);
  --type-ctrl-weight: var(--font-weight-600);
  --type-ctrl-color: var(--color-text-1);
  --type-ctrl-leading: var(--font-leading-1.0);
  --type-ctrl-tracking: var(--font-tracking-0em);
  --type-eyebrow-size: var(--font-size-9px);
  --type-eyebrow-weight: var(--font-weight-700);
  --type-eyebrow-color: var(--color-text-1);
  --type-eyebrow-leading: var(--font-leading-1.0);
  --type-eyebrow-tracking: var(--font-tracking-+0.1em);
  --type-label-size: var(--font-size-8px);
  --type-label-weight: var(--font-weight-700);
  --type-label-color: var(--color-text-1);
  --type-label-leading: var(--font-leading-1.0);
  --type-label-tracking: var(--font-tracking-+0.1em);
  --type-unit-size: var(--font-size-10px);
  --type-unit-weight: var(--font-weight-500);
  --type-unit-color: var(--color-text-2);
  --type-unit-leading: var(--font-leading-1.0);
  --type-unit-tracking: var(--font-tracking-0em);
  --type-display-size: var(--font-size-18px);
  --type-display-weight: var(--font-weight-700);
  --type-display-color: var(--color-text-6);
  --type-display-leading: var(--font-leading-1.0);
  --type-display-tracking: var(--font-tracking-0em);
  --btn-bg: var(--color-surface-3);
  --btn-color: var(--color-text-1);
  --btn-border: var(--color-border-2);
  --btn-hover-color: var(--color-text-2);
  --btn-hover-border: var(--color-border-3);
  --btn-radius: var(--radius-4px);
  --btn-height: 24px;
  --btn-pad-x: var(--spacing-8px);
  --btn-font-size: var(--type-ctrl-size);
  --btn-font-weight: var(--type-ctrl-weight);
  --btn-font-leading: var(--type-ctrl-leading);
  --btn-font-tracking: var(--type-ctrl-tracking);
  --cta-bg: var(--color-accent);
  --cta-color: var(--color-fg);
  --cta-radius: var(--radius-4px);
  --cta-height: 28px;
  --cta-pad-x: var(--spacing-12px);
  --cta-font-size: var(--type-ctrl-size);
  --cta-font-weight: var(--type-ctrl-weight);
  --cta-font-leading: var(--type-ctrl-leading);
  --cta-font-tracking: var(--type-ctrl-tracking);
  --cta-lg-height: 32px;
  --cta-lg-pad-x: var(--spacing-16px);
  --cta-lg-font-size: var(--type-meta-size);
  --cta-lg-font-weight: var(--type-meta-weight);
  --cta-lg-font-leading: var(--type-meta-leading);
  --cta-lg-font-tracking: var(--type-meta-tracking);
  --seg-bg: var(--color-surface-3);
  --seg-color: var(--color-text-1);
  --seg-border: var(--color-border-2);
  --seg-hover-color: var(--color-text-2);
  --seg-hover-border: var(--color-border-3);
  --seg-active-bg: var(--color-surface-5);
  --seg-active-color: var(--color-text-3);
  --seg-active-border: var(--color-border-3);
  --seg-radius: var(--radius-4px);
  --seg-pad-x: var(--spacing-8px);
  --seg-font-size: var(--type-ctrl-size);
  --seg-font-weight: var(--type-ctrl-weight);
  --seg-font-leading: var(--type-ctrl-leading);
  --seg-font-tracking: var(--type-ctrl-tracking);
  --tog-bg: var(--color-surface-3);
  --tog-color: var(--color-text-1);
  --tog-border: var(--color-border-2);
  --tog-hover-color: var(--color-text-2);
  --tog-active-bg: var(--color-surface-5);
  --tog-active-color: var(--color-text-3);
  --tog-radius: var(--radius-4px);
  --tog-height: 24px;
  --tog-pad-x: var(--spacing-12px);
  --tog-font-size: var(--type-ctrl-size);
  --tog-font-weight: var(--type-ctrl-weight);
  --tog-font-leading: var(--type-ctrl-leading);
  --tog-font-tracking: var(--type-ctrl-tracking);
  --tab-color: var(--color-text-1);
  --tab-hover-color: var(--color-text-2);
  --tab-active-color: var(--color-text-3);
  --tab-active-line: var(--color-accent);
  --tab-divider: var(--color-border-1);
  --tab-pad-x: var(--spacing-16px);
  --tab-pad-y: var(--spacing-8px);
  --tab-font-size: var(--type-ctrl-size);
  --tab-font-weight: var(--type-ctrl-weight);
  --tab-font-leading: var(--type-ctrl-leading);
  --tab-font-tracking: var(--type-ctrl-tracking);
  --inp-bg: var(--color-surface-2);
  --inp-color: var(--color-text-1);
  --inp-border: var(--color-border-2);
  --inp-hover-border: var(--color-border-3);
  --inp-hover-color: var(--color-text-2);
  --inp-focus-border: var(--color-accent);
  --inp-focus-color: var(--color-text-3);
  --inp-height: 24px;
  --inp-radius: var(--radius-4px);
  --inp-pad-x: var(--spacing-8px);
  --inp-font-size: var(--type-ctrl-size);
  --inp-font-weight: var(--type-ctrl-weight);
  --inp-font-leading: var(--type-ctrl-leading);
  --inp-font-tracking: var(--type-ctrl-tracking);
  --ddt-bg: var(--color-surface-3);
  --ddt-color: var(--color-text-1);
  --ddt-border: var(--color-border-2);
  --ddt-hover-border: var(--color-border-3);
  --ddt-hover-color: var(--color-text-2);
  --ddt-height: 24px;
  --ddt-radius: var(--radius-4px);
  --ddt-pad-x: var(--spacing-8px);
  --ddt-font-size: var(--type-eyebrow-size);
  --ddt-font-weight: var(--type-eyebrow-weight);
  --ddt-font-leading: var(--type-eyebrow-leading);
  --ddt-font-tracking: var(--type-eyebrow-tracking);
  --ddp-bg: var(--color-surface-3);
  --ddp-border: var(--color-border-2);
  --ddp-radius: var(--radius-8px);
  --ddp-width: 264px;
  --ddp-search-bg: var(--color-surface-2);
  --ddp-item-color: var(--color-text-1);
  --ddp-item-hover: var(--color-text-3);
  --ddp-pill-bg: var(--color-surface-4);
  --ddp-input-height: 24px;
  --ddp-pad: var(--spacing-8px);
  --ddp-item-pad-x: var(--spacing-4px);
  --ddp-item-pad-y: var(--spacing-4px);
  --ddp-font-size: var(--type-ctrl-size);
  --ddp-font-weight: var(--type-ctrl-weight);

  /* Dropdown-popup open/close animation (transitions.dev menu-dropdown pattern) */
  --ddp-open-dur:     250ms;
  --ddp-close-dur:    150ms;
  --ddp-pre-scale:    0.97;
  --ddp-closing-scale: 0.99;
  --ddp-ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --ddp-font-leading: var(--type-ctrl-leading);
  --ddp-font-tracking: var(--type-ctrl-tracking);
  --cb-border: var(--color-border-2);
  --cb-fill: var(--color-accent);
  --cb-check: var(--color-fg);
  --cb-size: 16px;
  --pill-bg: var(--color-surface-5);
  --pill-color: var(--color-text-1);
  --pill-hover-color: var(--color-text-2);
  --pill-pad-x: var(--spacing-8px);
  --pill-pad-y: var(--spacing-4px);
  --pill-font-size: var(--type-ctrl-size);
  --pill-font-weight: var(--type-ctrl-weight);
  --pill-font-leading: var(--type-ctrl-leading);
  --pill-font-tracking: var(--type-ctrl-tracking);
  --sl-track-bg: var(--color-border-1);
  --sl-thumb-bg: var(--color-accent-bright);
  --sl-thumb-border: var(--color-surface-1);
  --sl-track-height: 3px;
  --sl-thumb-size: 13px;
  --sl-thumb-border-w: 2px;
  --sc-bg: var(--color-surface-2);
  --sc-border: var(--color-border-1);
  --sc-label-color: var(--color-text-1);
  --sc-unit-color: var(--color-text-1);
  --sc-radius: var(--radius-10px);
  --sc-pad-x: var(--spacing-12px);
  --sc-pad-y: var(--spacing-12px);
  --sc-val-blue: var(--color-status-blue);
  --sc-val-red: var(--color-status-red);
  --sc-val-green: var(--color-status-green);
  --sc-val-amber: var(--color-status-amber);
  --sc-val-orange: var(--color-status-orange);
  --sc-val-white: var(--color-status-white);
  --sc-label-font-size: var(--type-label-size);
  --sc-label-font-weight: var(--type-label-weight);
  --sc-label-font-leading: var(--type-label-leading);
  --sc-label-font-tracking: var(--type-label-tracking);
  --sc-value-font-size: var(--type-display-size);
  --sc-value-font-weight: var(--type-display-weight);
  --sc-value-font-leading: var(--type-display-leading);
  --sc-value-font-tracking: var(--type-display-tracking);
  --chart-bg: var(--color-surface-2);
  --chart-border: var(--color-border-1);
  --chart-radius: var(--radius-10px);
  --chart-title-color: var(--color-text-1);
  --lc-bg: var(--color-surface-4);
  --lc-border: var(--color-border-1);
  --lc-hover-border: var(--color-accent-bright);
  --lc-selected-bg: var(--color-accent-tint-2);
  --lc-radius: var(--radius-10px);
  --lc-pad-x: var(--spacing-12px);
  --lc-pad-y: var(--spacing-6px);
  --lc-best-color: var(--color-status-green);
  --lc-slower-color: var(--color-status-red);
  --lv-bg: var(--color-surface-2);
  --lv-divider: var(--color-border-1);
  --lv-radius: var(--radius-10px);
  --lv-hover-fill: var(--color-surface-3);
  --lv-color: var(--color-text-1);
  --lv-hover-color: var(--color-text-3);
  --lv-font-size: var(--type-ctrl-size);
  --lv-font-weight: var(--type-ctrl-weight);
  --lv-font-leading: var(--type-ctrl-leading);
  --lv-font-tracking: var(--type-ctrl-tracking);
  --badge-color-bin: var(--color-accent-bright);
  --badge-color-csv: var(--color-status-green);
  --badge-color-vbo: var(--color-status-amber);
  --badge-radius: var(--radius-4px);
  --badge-font-size: var(--type-label-size);
  --badge-font-weight: var(--type-label-weight);
  --badge-font-leading: var(--type-label-leading);
  --badge-font-tracking: var(--type-label-tracking);
  --dz-bg: var(--color-surface-2);
  --dz-border: var(--color-border-2);
  --dz-active-border: var(--color-accent-bright);
  --dz-radius: var(--radius-10px);
  --dz-headline-color: var(--color-text-3);
  --dz-desc-color: var(--color-text-1);
  --nav-bg: var(--color-surface-1);
  --nav-border: var(--color-border-1);
  --nav-color: var(--color-text-1);
  --nav-hover-color: var(--color-text-2);
  --nav-active-color: var(--color-text-3);
  --nav-active-accent: var(--color-accent);
  --nav-section-color: var(--color-border-3);
  --nav-icon-size: 13px;
  --nav-width: 220px;
  --nav-pad-x: var(--spacing-16px);
  --nav-pad-y: var(--spacing-8px);
  --nav-font-size: var(--type-meta-size);
  --nav-font-weight: var(--type-meta-weight);
  --nav-font-leading: var(--type-meta-leading);
  --nav-font-tracking: var(--type-meta-tracking);
  --bar-width: 10px;
  --bar-height: 4px;

  /* ── Status color missing from base set ─────────────────── */
  --color-status-magenta: #ec4899;

  /* ── Chart UI tokens (used by Plotly / JS-rendered charts) ─ */
  --chart-hover-bg: #1f2937;
  --chart-hover-border: #374151;
  --chart-col-dot-empty: #2a2a3f;
  --chart-3d-bg: #111827;
  --chart-3d-grid: #1f2937;

  /* ── Chart trace-color palette ───────────────────────────── */
  /* These are intentionally distinct from --color-status-* (which are
     UI-indicator hues). Trace colors are higher-saturation Tailwind 500
     variants chosen for readability on dark chart backgrounds. */
  --chart-trace-blue:    #3b82f6;
  --chart-trace-red:     #ef4444;
  --chart-trace-green:   #22c55e;
  --chart-trace-amber:   #f59e0b;
  --chart-trace-purple:  #8b5cf6;
  --chart-trace-magenta: #ec4899;
  --chart-trace-indigo:  #6366f1;
  --chart-trace-cyan:    #06b6d4;
  --chart-trace-orange:  #f97316;
  --chart-trace-lime:    #84cc16;
  --chart-trace-teal:    #14b8a6;
  --chart-trace-sky:     #0ea5e9;
  --chart-trace-yellow:  #eab308;
  --chart-trace-emerald: #10b981;
  --chart-trace-rose:    #f43f5e;
  --chart-trace-white:   #ffffff;

  /* ── Layout tokens (used in calc() to avoid magic numbers) ─ */
  --header-height: 46px;
  --toolbar-height: 40px;
  --sidebar-width-full: 220px;
  --modal-pad: 2rem;

  /* ── Timeline Annotation event-type colors ── */
  --ev-knock:         #f87171;
  --ev-knock-rgb:     248, 113, 113;
  --ev-thermal:       #fbbf24;
  --ev-thermal-rgb:   251, 191, 36;
  --ev-wot:           #34d399;
  --ev-wot-rgb:       52, 211, 153;
  --ev-shift:         #60a5fa;
  --ev-shift-rgb:     96, 165, 250;
  --ev-dim-overlay:   rgba(3, 7, 18, 0.55);
}