@theme {
    /* ========================================
   * TEXT COLORS
   * ======================================== */
    --color-text-primary: var(--color-slate-900);
    --color-text-primary-alt: var(--color-white);
    --color-text-primary-fixed: var(--color-slate-900);
    --color-text-primary-alt-fixed: var(--color-white);
    --color-text-secondary: var(--color-slate-500);
    --color-text-secondary-alt: --alpha(var(--color-white) / 80%);
    --color-text-tertiary: var(--color-slate-300);
    --color-text-tertiary-alt: --alpha(var(--color-white) / 70%);
    --color-text-hint: var(--color-slate-300);

    /* Brand & Semantic Text */
    --color-text-brand: var(--color-w-orange-600);
    --color-text-danger: var(--color-red-600);
    --color-text-warning: var(--color-amber-700);
    --color-text-success: var(--color-green-600);
    --color-text-info: var(--color-blue-600);
    --color-text-ai: var(--color-purple-600);

    /* Disabled Text */
    --color-text-disable-primary: --alpha(var(--color-slate-900) / 40%);
    --color-text-disable-primary-alt: --alpha(var(--color-white) / 40%);
    --color-text-disable-brand: var(--color-w-orange-200);
    --color-text-disable-danger: var(--color-red-200);
    --color-text-disable-warning: var(--color-amber-300);
    --color-text-disable-succes: var(--color-green-200);
    --color-text-disable-info: var(--color-blue-200);
    --color-text-disable-ai: var(--color-purple-200);

    /* Link Text */
    --color-text-link-default: var(--color-blue-600);
    --color-text-link-hover: var(--color-blue-800);
    --color-text-link-default-alt: var(--color-blue-300);
    --color-text-link-hover-alt: var(--color-blue-200);

    /* ========================================
   * ICON COLORS
   * ======================================== */
    --color-icon-primary: var(--color-slate-900);
    --color-icon-primary-alt: var(--color-white);
    --color-icon-primary-fixed: var(--color-slate-900);
    --color-icon-primary-alt-fixed: var(--color-white);
    --color-icon-primary-disable: --alpha(var(--color-slate-900) / 40%);
    --color-icon-primary-alt-disable: --alpha(var(--color-white) / 40%);
    --color-icon-secondary: var(--color-slate-500);
    --color-icon-secondary-alt: --alpha(var(--color-white) / 80%);

    /* Brand & Semantic Icons */
    --color-icon-brand: var(--color-w-orange-600);
    --color-icon-danger: var(--color-red-600);
    --color-icon-warning: var(--color-amber-600);
    --color-icon-success: var(--color-green-600);
    --color-icon-info: var(--color-blue-600);
    --color-icon-ai: var(--color-purple-600);

    /* ========================================
   * BACKGROUND COLORS
   * ======================================== */
    /* Page & Surface */
    --color-bg-page-bg: var(--color-white);
    --color-bg-surface-1: var(--color-white);
    --color-bg-surface-2: var(--color-white);
    --color-bg-surface-3: var(--color-white);
    --color-bg-surface-4: var(--color-white);
    --color-bg-surface-5: var(--color-slate-100);

    /* Primary Backgrounds */
    --color-bg-primary: var(--color-slate-100);
    --color-bg-light-primary: var(--color-slate-50);
    --color-bg-strong-primary: var(--color-slate-300);

    /* Brand Backgrounds */
    --color-bg-brand: var(--color-w-orange-100);
    --color-bg-light-brand: var(--color-w-orange-50);
    --color-bg-strong-brand: var(--color-w-orange-300);

    /* Semantic Backgrounds */
    --color-bg-danger: var(--color-red-100);
    --color-bg-light-danger: var(--color-red-50);
    --color-bg-strong-danger: var(--color-red-300);

    --color-bg-warning: var(--color-amber-100);
    --color-bg-light-warning: var(--color-amber-50);
    --color-bg-strong-warning: var(--color-amber-100);

    --color-bg-success: var(--color-green-100);
    --color-bg-light-success: var(--color-green-50);
    --color-bg-strong-success: var(--color-green-300);

    --color-bg-info: var(--color-blue-100);
    --color-bg-light-info: var(--color-blue-50);
    --color-bg-strong-info: var(--color-blue-300);

    --color-bg-ai: var(--color-purple-100);
    --color-bg-light-ai: var(--color-purple-50);
    --color-bg-strong-ai: var(--color-purple-300);

    /* Fill Backgrounds */
    --color-bg-fill-brand: var(--color-w-orange-600);
    --color-bg-fill-danger: var(--color-red-600);
    --color-bg-fill-warning: var(--color-amber-500);
    --color-bg-fill-success: var(--color-green-600);
    --color-bg-fill-info: var(--color-blue-600);
    --color-bg-fill-ai: var(--color-purple-600);

    /* ========================================
   * BORDER COLORS
   * ======================================== */
    --color-border-primary: var(--color-slate-300);
    --color-border-primary-light: var(--color-slate-200);
    --color-border-strong-primary: var(--color-slate-500);

    /* ========================================
   * FOCUS RING COLORS
   * ======================================== */
    --color-focus-ring-primary: --alpha(var(--color-slate-400) / 30%);

    /* Brand Borders */
    --color-border-brand: var(--color-w-orange-300);
    --color-border-strong-brand: var(--color-w-orange-500);

    /* Semantic Borders */
    --color-border-danger: var(--color-red-300);
    --color-border-strong-danger: var(--color-red-600);

    --color-border-warning: var(--color-amber-300);
    --color-border-strong-warning: var(--color-amber-500);

    --color-border-success: var(--color-green-300);
    --color-border-strong-success: var(--color-green-500);

    --color-border-info: var(--color-blue-300);
    --color-border-strong-info: var(--color-blue-500);

    --color-border-ai: var(--color-purple-300);
    --color-border-strong-ai: var(--color-purple-500);

    /* ========================================
   * STATE COLORS
   * ======================================== */
    /* General State Colors */
    --color-states-default-all: --alpha(var(--color-white) / 0%);
    --color-states-on-fill-hover: --alpha(var(--color-white) / 10%);
    --color-states-on-fill-pressed: --alpha(var(--color-white) / 40%);
    --color-states-on-fill-disabled: --alpha(var(--color-white) / 40%);

    /* Primary States */
    --color-states-primary-default-alt: --alpha(var(--color-slate-500) / 6%);
    --color-states-primary-hover: --alpha(var(--color-slate-500) / 8%);
    --color-states-primary-pressed: --alpha(var(--color-slate-500) / 16%);
    --color-states-primary-active: --alpha(var(--color-slate-500) / 10%);
    --color-states-primary-alt-default-alt: --alpha(var(--color-white) / 6%);
    --color-states-primary-alt-hover: --alpha(var(--color-white) / 8%);
    --color-states-primary-alt-pressed: --alpha(var(--color-white) / 16%);
    --color-states-primary-alt-active: --alpha(var(--color-white) / 12%);

    /* Brand States */
    --color-states-brand-default-alt: --alpha(var(--color-w-orange-500) / 6%);
    --color-states-brand-hover: --alpha(var(--color-w-orange-500) / 8%);
    --color-states-brand-pressed: --alpha(var(--color-w-orange-500) / 16%);
    --color-states-brand-active: --alpha(var(--color-w-orange-500) / 12%);

    /* Danger States */
    --color-states-danger-default-alt: --alpha(var(--color-red-500) / 6%);
    --color-states-danger-hover: --alpha(var(--color-red-500) / 8%);
    --color-states-danger-pressed: --alpha(var(--color-red-500) / 16%);
    --color-states-danger-active: --alpha(var(--color-red-500) / 12%);

    /* Warning States */
    --color-states-warning-default-alt: --alpha(var(--color-amber-500) / 6%);
    --color-states-warning-hover: --alpha(var(--color-amber-500) / 8%);
    --color-states-warning-pressed: --alpha(var(--color-amber-500) / 16%);
    --color-states-warning-active: --alpha(var(--color-amber-500) / 12%);

    /* Success States */
    --color-states-success-default-alt: --alpha(var(--color-green-500) / 6%);
    --color-states-success-hover: --alpha(var(--color-green-500) / 8%);
    --color-states-success-pressed: --alpha(var(--color-green-500) / 16%);
    --color-states-success-active: --alpha(var(--color-green-500) / 12%);

    /* Info States */
    --color-states-info-default-alt: --alpha(var(--color-blue-500) / 6%);
    --color-states-info-hover: --alpha(var(--color-blue-500) / 8%);
    --color-states-info-pressed: --alpha(var(--color-blue-500) / 16%);
    --color-states-info-active: --alpha(var(--color-blue-500) / 12%);

    /* AI States */
    --color-states-ai-default-alt: --alpha(var(--color-purple-500) / 6%);
    --color-states-ai-hover: --alpha(var(--color-purple-500) / 8%);
    --color-states-ai-pressed: --alpha(var(--color-purple-500) / 16%);
    --color-states-ai-active: --alpha(var(--color-purple-500) / 12%);

    /* ========================================
   * COMPONENT-SPECIFIC COLORS
   * ======================================== */
    --color-component-outline-button-bg: var(--color-white);
    --color-component-input-bg: var(--color-white);
    --color-component-switcher-bg: var(--color-slate-200);
    --color-component-border-hotkey: var(--color-slate-200);
    --color-component-border-input-hover: var(--color-slate-400);
    --color-component-overlay: --alpha(var(--color-slate-600) / 60%);
    --color-component-tooltip-bg: --alpha(var(--color-slate-950) / 80%);
    --color-component-logo-ic: var(--color-w-orange-600);
    --color-component-logo-wordmark: var(--color-slate-950);
    --color-component-logo-wordmark-alt: var(--color-white);
    --color-component-kbi-tooltip-bg: --alpha(var(--color-white) / 20%);
    --color-component-dialog-overlay: --alpha(var(--color-white) / 60%);
    --color-component-code-snippet-bg: --alpha(var(--color-slate-500) / 6%);
    --color-component-toast-bg: var(--color-slate-800);
    --color-component-toast-ic-destructive: var(--color-red-400);
    --color-component-toast-ic-warning: var(--color-amber-400);
    --color-component-toast-ic-success: var(--color-green-400);
    --color-component-toast-ic-info: var(--color-blue-400);
    --color-component-app-shell-bg: var(--color-slate-100);

    /* ========================================
   * SYNTAX COLORS
   * ⚠️  CODE-MANAGED — DO NOT SYNC FROM FIGMA
   * These token-to-color mappings are intentionally decoupled from Figma.
   * The underlying palette values (e.g. --color-slate-900's hex) may change,
   * but the mapping here (e.g. keyword → purple-600) must not be overwritten
   * by Figma design token imports or AI-assisted Figma syncs.
   * ======================================== */
    --color-syntax-no-syntax: var(--color-slate-900);

    /* Syntax Highlighting — base tokens (One Light / GitHub Light family) */
    --color-syntax-keyword: var(--color-purple-600);
    --color-syntax-function: var(--color-blue-600);
    --color-syntax-string: var(--color-green-600);
    --color-syntax-number-boolean: var(--color-amber-700);
    --color-syntax-tag: var(--color-red-600);
    --color-syntax-attribute: var(--color-amber-700);
    --color-syntax-comment: var(--color-slate-400);
    --color-syntax-type: var(--color-yellow-700);
    --color-syntax-operator: var(--color-slate-700);
    --color-syntax-variable: var(--color-red-600);

    /* Syntax Highlighting — aliases for CodeToken mapping */
    --color-syntax-number: var(--color-syntax-number-boolean);
    --color-syntax-boolean: var(--color-syntax-keyword);
    --color-syntax-constant: var(--color-syntax-keyword);
    --color-syntax-builtin: var(--color-syntax-keyword);
    --color-syntax-class-name: var(--color-syntax-type);
    --color-syntax-property: var(--color-syntax-variable);
    --color-syntax-attr-name: var(--color-syntax-attribute);
    --color-syntax-attr-value: var(--color-syntax-string);
    --color-syntax-regex: var(--color-syntax-string);
    --color-syntax-punctuation: var(--color-syntax-operator);

    /* Syntax Highlight - Neutral */
    --color-syntax-highlight-neutral-code: var(--color-slate-900);
    --color-syntax-highlight-neutral-indicator: var(--color-slate-600);
    --color-syntax-highlight-neutral-highlight: --alpha(var(--color-slate-500) / 6%);
    --color-syntax-highlight-selected-code: var(--color-white);
    --color-syntax-highlight-selected-highlight: var(--color-slate-950);

    /* Syntax Highlight - Error */
    --color-syntax-highlight-error-code: var(--color-red-600);
    --color-syntax-highlight-error-indicator: var(--color-red-600);
    --color-syntax-highlight-error-highlight: --alpha(var(--color-red-500) / 6%);

    /* Syntax Highlight - Warning */
    --color-syntax-highlight-warning-code: var(--color-amber-700);
    --color-syntax-highlight-warning-indicator: var(--color-amber-600);
    --color-syntax-highlight-warning-highlight: --alpha(var(--color-amber-500) / 6%);

    /* Syntax Highlight - Info */
    --color-syntax-highlight-info-code: var(--color-blue-600);
    --color-syntax-highlight-info-indicator: var(--color-blue-600);
    --color-syntax-highlight-info-highlight: --alpha(var(--color-blue-500) / 6%);

    /* Syntax Highlight - Success */
    --color-syntax-highlight-success-code: var(--color-green-600);
    --color-syntax-highlight-success-indicator: var(--color-green-600);
    --color-syntax-highlight-success-highlight: --alpha(var(--color-green-500) / 6%);

    /* Syntax Highlight - Brand */
    --color-syntax-highlight-brand-code: var(--color-w-orange-600);
    --color-syntax-highlight-brand-indicator: var(--color-w-orange-600);
    --color-syntax-highlight-brand-highlight: --alpha(var(--color-w-orange-500) / 6%);

    /* Syntax Highlight - AI */
    --color-syntax-highlight-ai-code: var(--color-purple-600);
    --color-syntax-highlight-ai-indicator: var(--color-purple-600);
    --color-syntax-highlight-ai-highlight: --alpha(var(--color-purple-500) / 6%);

    /* ========================================
   * BADGE COLORS
   * ======================================== */
    --color-badge-on-solid: --alpha(var(--color-white) / 95%);
    --color-badge-badge-bg: var(--color-white);
    --color-badge-label-primary: var(--color-slate-700);

    /* Color-specific Badge Variants */
    --color-badge-slate-light: var(--color-slate-100);
    --color-badge-slate-strong: var(--color-slate-700);
    --color-badge-slate-dark: var(--color-slate-700);
    --color-badge-slate-dark-alt: var(--color-slate-500);

    --color-badge-gray-light: var(--color-gray-100);
    --color-badge-gray-strong: var(--color-gray-700);
    --color-badge-gray-dark: var(--color-gray-700);
    --color-badge-gray-dark-alt: var(--color-gray-500);

    --color-badge-zinc-light: var(--color-zinc-100);
    --color-badge-zinc-strong: var(--color-zinc-700);
    --color-badge-zinc-dark: var(--color-zinc-700);
    --color-badge-zinc-dark-alt: var(--color-zinc-500);

    --color-badge-neutral-light: var(--color-neutral-100);
    --color-badge-neutral-strong: var(--color-neutral-700);
    --color-badge-neutral-dark: var(--color-neutral-700);
    --color-badge-neutral-dark-alt: var(--color-neutral-500);

    --color-badge-stone-light: var(--color-stone-100);
    --color-badge-stone-strong: var(--color-stone-700);
    --color-badge-stone-dark: var(--color-stone-700);
    --color-badge-stone-dark-alt: var(--color-stone-500);

    --color-badge-red-light: var(--color-red-100);
    --color-badge-red-strong: var(--color-red-500);
    --color-badge-red-dark: var(--color-red-800);

    --color-badge-w-orange-light: var(--color-w-orange-100);
    --color-badge-w-orange-strong: var(--color-w-orange-500);
    --color-badge-w-orange-dark: var(--color-w-orange-800);

    --color-badge-amber-light: var(--color-amber-100);
    --color-badge-amber-strong: var(--color-amber-500);
    --color-badge-amber-dark: var(--color-amber-800);

    --color-badge-yellow-light: var(--color-yellow-100);
    --color-badge-yellow-strong: var(--color-yellow-500);
    --color-badge-yellow-dark: var(--color-yellow-800);

    --color-badge-lime-light: var(--color-lime-100);
    --color-badge-lime-strong: var(--color-lime-500);
    --color-badge-lime-dark: var(--color-lime-800);

    --color-badge-green-light: var(--color-green-100);
    --color-badge-green-strong: var(--color-green-500);
    --color-badge-green-dark: var(--color-green-800);

    --color-badge-emerald-light: var(--color-emerald-100);
    --color-badge-emerald-strong: var(--color-emerald-500);
    --color-badge-emerald-dark: var(--color-emerald-800);

    --color-badge-teal-light: var(--color-teal-100);
    --color-badge-teal-strong: var(--color-teal-500);
    --color-badge-teal-dark: var(--color-teal-800);

    --color-badge-cyan-light: var(--color-cyan-100);
    --color-badge-cyan-strong: var(--color-cyan-500);
    --color-badge-cyan-dark: var(--color-cyan-800);

    --color-badge-sky-light: var(--color-sky-100);
    --color-badge-sky-strong: var(--color-sky-500);
    --color-badge-sky-dark: var(--color-sky-800);

    --color-badge-blue-light: var(--color-blue-100);
    --color-badge-blue-strong: var(--color-blue-500);
    --color-badge-blue-dark: var(--color-blue-800);

    --color-badge-indigo-light: var(--color-indigo-100);
    --color-badge-indigo-strong: var(--color-indigo-500);
    --color-badge-indigo-dark: var(--color-indigo-800);

    --color-badge-violet-light: var(--color-violet-100);
    --color-badge-violet-strong: var(--color-violet-500);
    --color-badge-violet-dark: var(--color-violet-800);

    --color-badge-purple-light: var(--color-purple-100);
    --color-badge-purple-strong: var(--color-purple-500);
    --color-badge-purple-dark: var(--color-purple-800);

    --color-badge-fuchsia-light: var(--color-fuchsia-100);
    --color-badge-fuchsia-strong: var(--color-fuchsia-500);
    --color-badge-fuchsia-dark: var(--color-fuchsia-800);

    --color-badge-pink-light: var(--color-pink-100);
    --color-badge-pink-strong: var(--color-pink-500);
    --color-badge-pink-dark: var(--color-pink-800);

    --color-badge-rose-light: var(--color-rose-100);
    --color-badge-rose-strong: var(--color-rose-500);
    --color-badge-rose-dark: var(--color-rose-800);

    /* ========================================
   * MISC TOKENS
   * ======================================== */
    --color-data-viz-1: #ffffff;
    --temp-token: #ffffff;
}

[data-theme="dark"] {
    /* ========================================
     * TEXT COLORS
     * ======================================== */
    --color-text-primary: var(--color-slate-50);
    --color-text-primary-alt: var(--color-slate-900);
    --color-text-primary-fixed: var(--color-slate-900);
    --color-text-primary-alt-fixed: var(--color-white);
    --color-text-secondary: --alpha(var(--color-slate-50) / 80%);
    --color-text-secondary-alt: var(--color-slate-700);
    --color-text-tertiary: --alpha(var(--color-slate-50) / 40%);
    --color-text-tertiary-alt: var(--color-slate-600);
    --color-text-hint: --alpha(var(--color-slate-50) / 40%);

    /* Brand & Semantic Text */
    --color-text-brand: var(--color-w-orange-300);
    --color-text-danger: var(--color-red-300);
    --color-text-warning: var(--color-amber-300);
    --color-text-success: var(--color-green-300);
    --color-text-info: var(--color-blue-300);
    --color-text-ai: var(--color-purple-300);

    /* Disabled Text */
    --color-text-disable-primary: --alpha(var(--color-slate-50) / 40%);
    --color-text-disable-primary-alt: --alpha(var(--color-slate-900) / 40%);
    --color-text-disable-brand: --alpha(var(--color-w-orange-300) / 60%);
    --color-text-disable-danger: --alpha(var(--color-red-300) / 60%);
    --color-text-disable-warning: --alpha(var(--color-amber-300) / 60%);
    --color-text-disable-succes: --alpha(var(--color-green-300) / 60%);
    --color-text-disable-info: --alpha(var(--color-blue-300) / 60%);
    --color-text-disable-ai: --alpha(var(--color-purple-300) / 60%);

    /* Link Text */
    --color-text-link-default: var(--color-blue-300);
    --color-text-link-hover: var(--color-blue-200);
    --color-text-link-default-alt: var(--color-blue-600);
    --color-text-link-hover-alt: var(--color-blue-800);

    /* ========================================
     * ICON COLORS
     * ======================================== */
    --color-icon-primary: var(--color-slate-50);
    --color-icon-primary-alt: var(--color-slate-900);
    --color-icon-primary-alt-fixed: var(--color-white);
    --color-icon-primary-disable: --alpha(var(--color-slate-50) / 40%);
    --color-icon-primary-alt-disable: --alpha(var(--color-slate-900) / 40%);
    --color-icon-secondary: --alpha(var(--color-slate-50) / 80%);
    --color-icon-secondary-alt: var(--color-slate-500);

    /* Brand & Semantic Icons */
    --color-icon-brand: var(--color-w-orange-300);
    --color-icon-danger: var(--color-red-300);
    --color-icon-warning: var(--color-amber-300);
    --color-icon-success: var(--color-green-300);
    --color-icon-info: var(--color-blue-300);
    --color-icon-ai: var(--color-purple-300);

    /* ========================================
     * BACKGROUND COLORS
     * ======================================== */
    /* Page & Surface */
    --color-bg-page-bg: var(--color-slate-950);
    --color-bg-surface-1: #0d1123;
    --color-bg-surface-2: #141829;
    --color-bg-surface-3: #1b1f30;
    --color-bg-surface-4: #1f2334;
    --color-bg-surface-5: #262a3b;

    /* Primary Backgrounds */
    --color-bg-primary: #262a3b;
    --color-bg-light-primary: #1b1f30;
    --color-bg-strong-primary: #333848;

    /* Brand Backgrounds */
    --color-bg-brand: #25131c;
    --color-bg-light-brand: #160e1a;
    --color-bg-strong-brand: #3a1b1e;

    /* Semantic Backgrounds */
    --color-bg-danger: #220516;
    --color-bg-light-danger: #140617;
    --color-bg-strong-danger: #340515;

    --color-bg-warning: #251b15;
    --color-bg-light-warning: #161216;
    --color-bg-strong-warning: #392713;

    --color-bg-success: #022120;
    --color-bg-light-success: #02161c;
    --color-bg-strong-success: #023124;

    --color-bg-info: #081738;
    --color-bg-light-info: #05102a;
    --color-bg-strong-info: #0b214b;

    --color-bg-ai: #1a0f38;
    --color-bg-light-ai: #100b2a;
    --color-bg-strong-ai: #28144b;

    /* Fill Backgrounds */
    --color-bg-fill-brand: var(--color-w-orange-400);
    --color-bg-fill-danger: var(--color-red-400);
    --color-bg-fill-warning: var(--color-amber-400);
    --color-bg-fill-success: var(--color-green-400);
    --color-bg-fill-info: var(--color-blue-400);
    --color-bg-fill-ai: var(--color-purple-400);

    /* ========================================
     * BORDER COLORS
     * ======================================== */
    --color-border-primary: var(--color-slate-600);
    --color-border-primary-light: var(--color-slate-700);
    --color-border-strong-primary: var(--color-slate-400);

    /* ========================================
     * FOCUS RING COLORS
     * ======================================== */
    --color-focus-ring-primary: --alpha(var(--color-slate-400) / 30%);

    /* Brand Borders */
    --color-border-brand: var(--color-w-orange-700);
    --color-border-strong-brand: var(--color-w-orange-600);

    /* Semantic Borders */
    --color-border-danger: var(--color-red-700);
    --color-border-strong-danger: var(--color-red-500);

    --color-border-warning: var(--color-amber-700);
    --color-border-strong-warning: var(--color-amber-600);

    --color-border-success: var(--color-green-700);
    --color-border-strong-success: var(--color-green-500);

    --color-border-info: var(--color-blue-700);
    --color-border-strong-info: var(--color-blue-500);

    --color-border-ai: var(--color-purple-700);
    --color-border-strong-ai: var(--color-purple-500);

    /* ========================================
     * STATE COLORS
     * ======================================== */
    /* General State Colors */
    --color-states-default-all: --alpha(var(--color-slate-100) / 0%);
    --color-states-on-fill-hover: --alpha(var(--color-white) / 10%);
    --color-states-on-fill-pressed: --alpha(var(--color-white) / 40%);
    --color-states-on-fill-disabled: --alpha(var(--color-white) / 40%);

    /* Primary States */
    --color-states-primary-default-alt: --alpha(var(--color-slate-100) / 6%);
    --color-states-primary-hover: --alpha(var(--color-slate-100) / 8%);
    --color-states-primary-pressed: --alpha(var(--color-slate-100) / 16%);
    --color-states-primary-active: --alpha(var(--color-slate-100) / 12%);
    --color-states-primary-alt-default-alt: --alpha(var(--color-slate-500) / 6%);
    --color-states-primary-alt-hover: --alpha(var(--color-slate-500) / 8%);
    --color-states-primary-alt-pressed: --alpha(var(--color-slate-500) / 16%);
    --color-states-primary-alt-active: --alpha(var(--color-slate-500) / 12%);

    /* Brand States */
    --color-states-brand-default-alt: --alpha(var(--color-w-orange-300) / 6%);
    --color-states-brand-hover: --alpha(var(--color-w-orange-300) / 8%);
    --color-states-brand-pressed: --alpha(var(--color-w-orange-300) / 16%);
    --color-states-brand-active: --alpha(var(--color-w-orange-300) / 12%);

    /* Danger States */
    --color-states-danger-default-alt: --alpha(var(--color-red-300) / 6%);
    --color-states-danger-hover: --alpha(var(--color-red-300) / 8%);
    --color-states-danger-pressed: --alpha(var(--color-red-300) / 16%);
    --color-states-danger-active: --alpha(var(--color-red-300) / 12%);

    /* Warning States */
    --color-states-warning-default-alt: --alpha(var(--color-amber-300) / 6%);
    --color-states-warning-hover: --alpha(var(--color-amber-300) / 8%);
    --color-states-warning-pressed: --alpha(var(--color-amber-300) / 16%);
    --color-states-warning-active: --alpha(var(--color-amber-300) / 12%);

    /* Success States */
    --color-states-success-default-alt: --alpha(var(--color-green-300) / 6%);
    --color-states-success-hover: --alpha(var(--color-green-300) / 8%);
    --color-states-success-pressed: --alpha(var(--color-green-300) / 16%);
    --color-states-success-active: --alpha(var(--color-green-300) / 12%);

    /* Info States */
    --color-states-info-default-alt: --alpha(var(--color-blue-300) / 6%);
    --color-states-info-hover: --alpha(var(--color-blue-300) / 8%);
    --color-states-info-pressed: --alpha(var(--color-blue-300) / 16%);
    --color-states-info-active: --alpha(var(--color-blue-300) / 12%);

    /* AI States */
    --color-states-ai-default-alt: --alpha(var(--color-purple-300) / 6%);
    --color-states-ai-hover: --alpha(var(--color-purple-300) / 8%);
    --color-states-ai-pressed: --alpha(var(--color-purple-300) / 16%);
    --color-states-ai-active: --alpha(var(--color-purple-300) / 12%);

    /* ========================================
     * COMPONENT-SPECIFIC COLORS
     * ======================================== */
    --color-component-outline-button-bg: --alpha(var(--color-slate-200) / 5%);
    --color-component-input-bg: --alpha(var(--color-slate-200) / 5%);
    --color-component-switcher-bg: --alpha(var(--color-slate-50) / 30%);
    --color-component-border-hotkey: var(--color-slate-700);
    --color-component-border-input-hover: var(--color-slate-500);
    --color-component-overlay: --alpha(var(--color-slate-950) / 60%);
    --color-component-tooltip-bg: --alpha(var(--color-slate-100) / 93%);
    --color-component-logo-ic: var(--color-w-orange-600);
    --color-component-logo-wordmark: var(--color-white);
    --color-component-logo-wordmark-alt: var(--color-slate-950);
    --color-component-kbi-tooltip-bg: --alpha(var(--color-slate-950) / 20%);
    --color-component-dialog-overlay: --alpha(var(--color-slate-950) / 60%);
    --color-component-code-snippet-bg: --alpha(var(--color-slate-300) / 12%);
    --color-component-toast-bg: var(--color-slate-100);
    --color-component-toast-ic-destructive: var(--color-red-600);
    --color-component-toast-ic-warning: var(--color-amber-600);
    --color-component-toast-ic-success: var(--color-green-600);
    --color-component-toast-ic-info: var(--color-blue-600);
    --color-component-app-shell-bg: var(--color-slate-975);

    /* ========================================
     * SYNTAX COLORS
     * ⚠️  CODE-MANAGED — DO NOT SYNC FROM FIGMA
     * See light-mode comment above for details.
     * ======================================== */
    --color-syntax-no-syntax: var(--color-slate-200);

    /* Syntax Highlighting — base tokens (One Dark Pro / Dark+ family) */
    --color-syntax-keyword: var(--color-purple-400);
    --color-syntax-function: var(--color-blue-400);
    --color-syntax-string: var(--color-green-300);
    --color-syntax-number-boolean: var(--color-amber-300);
    --color-syntax-tag: var(--color-red-400);
    --color-syntax-attribute: var(--color-amber-300);
    --color-syntax-comment: var(--color-slate-500);
    --color-syntax-type: var(--color-yellow-300);
    --color-syntax-operator: var(--color-slate-300);
    --color-syntax-variable: var(--color-red-300);

    /* Syntax Highlighting — aliases for CodeToken mapping */
    --color-syntax-number: var(--color-syntax-number-boolean);
    --color-syntax-boolean: var(--color-syntax-keyword);
    --color-syntax-constant: var(--color-syntax-keyword);
    --color-syntax-builtin: var(--color-syntax-keyword);
    --color-syntax-class-name: var(--color-syntax-type);
    --color-syntax-property: var(--color-syntax-variable);
    --color-syntax-attr-name: var(--color-syntax-attribute);
    --color-syntax-attr-value: var(--color-syntax-string);
    --color-syntax-regex: var(--color-syntax-string);
    --color-syntax-punctuation: var(--color-syntax-operator);

    /* Syntax Highlight - Neutral */
    --color-syntax-highlight-neutral-code: var(--color-slate-200);
    --color-syntax-highlight-neutral-indicator: var(--color-slate-400);
    --color-syntax-highlight-neutral-highlight: --alpha(var(--color-slate-400) / 8%);
    --color-syntax-highlight-selected-code: var(--color-slate-50);
    --color-syntax-highlight-selected-highlight: var(--color-slate-700);

    /* Syntax Highlight - Error */
    --color-syntax-highlight-error-code: var(--color-red-300);
    --color-syntax-highlight-error-indicator: var(--color-red-400);
    --color-syntax-highlight-error-highlight: --alpha(var(--color-red-400) / 8%);

    /* Syntax Highlight - Warning */
    --color-syntax-highlight-warning-code: var(--color-amber-300);
    --color-syntax-highlight-warning-indicator: var(--color-amber-400);
    --color-syntax-highlight-warning-highlight: var(--color-amber-400);

    /* Syntax Highlight - Info */
    --color-syntax-highlight-info-code: var(--color-blue-300);
    --color-syntax-highlight-info-indicator: var(--color-blue-400);
    --color-syntax-highlight-info-highlight: --alpha(var(--color-blue-400) / 8%);

    /* Syntax Highlight - Success */
    --color-syntax-highlight-success-code: var(--color-green-300);
    --color-syntax-highlight-success-indicator: var(--color-green-400);
    --color-syntax-highlight-success-highlight: --alpha(var(--color-green-400) / 8%);

    /* Syntax Highlight - Brand */
    --color-syntax-highlight-brand-code: var(--color-w-orange-300);
    --color-syntax-highlight-brand-indicator: var(--color-w-orange-400);
    --color-syntax-highlight-brand-highlight: --alpha(var(--color-w-orange-400) / 8%);

    /* Syntax Highlight - AI */
    --color-syntax-highlight-ai-code: var(--color-purple-300);
    --color-syntax-highlight-ai-indicator: var(--color-purple-400);
    --color-syntax-highlight-ai-highlight: --alpha(var(--color-purple-400) / 8%);

    /* ========================================
     * BADGE COLORS
     * ======================================== */
    --color-badge-on-solid: --alpha(var(--color-white) / 95%);
    --color-badge-badge-bg: var(--color-slate-900);
    --color-badge-label-primary: var(--color-slate-200);

    /* Color-specific Badge Variants */
    --color-badge-slate-light: var(--color-slate-800);
    --color-badge-slate-strong: var(--color-slate-500);
    --color-badge-slate-dark: var(--color-slate-300);
    --color-badge-slate-dark-alt: var(--color-slate-400);

    --color-badge-gray-light: var(--color-gray-900);
    --color-badge-gray-strong: var(--color-gray-500);
    --color-badge-gray-dark: var(--color-gray-300);
    --color-badge-gray-dark-alt: var(--color-gray-400);

    --color-badge-zinc-light: var(--color-zinc-900);
    --color-badge-zinc-strong: var(--color-zinc-500);
    --color-badge-zinc-dark: var(--color-zinc-300);
    --color-badge-zinc-dark-alt: var(--color-zinc-400);

    --color-badge-neutral-light: var(--color-neutral-900);
    --color-badge-neutral-strong: var(--color-neutral-500);
    --color-badge-neutral-dark: var(--color-neutral-300);
    --color-badge-neutral-dark-alt: var(--color-neutral-400);

    --color-badge-stone-light: var(--color-stone-900);
    --color-badge-stone-strong: var(--color-stone-500);
    --color-badge-stone-dark: var(--color-stone-300);
    --color-badge-stone-dark-alt: var(--color-stone-400);

    --color-badge-red-light: var(--color-red-950);
    --color-badge-red-strong: var(--color-red-400);
    --color-badge-red-dark: var(--color-red-300);

    --color-badge-w-orange-light: var(--color-w-orange-950);
    --color-badge-w-orange-strong: var(--color-w-orange-400);
    --color-badge-w-orange-dark: var(--color-w-orange-300);

    --color-badge-amber-light: var(--color-amber-950);
    --color-badge-amber-strong: var(--color-amber-400);
    --color-badge-amber-dark: var(--color-amber-300);

    --color-badge-yellow-light: var(--color-yellow-950);
    --color-badge-yellow-strong: var(--color-yellow-400);
    --color-badge-yellow-dark: var(--color-yellow-300);

    --color-badge-lime-light: var(--color-lime-950);
    --color-badge-lime-strong: var(--color-lime-400);
    --color-badge-lime-dark: var(--color-lime-300);

    --color-badge-green-light: var(--color-green-950);
    --color-badge-green-strong: var(--color-green-400);
    --color-badge-green-dark: var(--color-green-300);

    --color-badge-emerald-light: var(--color-emerald-950);
    --color-badge-emerald-strong: var(--color-emerald-400);
    --color-badge-emerald-dark: var(--color-emerald-300);

    --color-badge-teal-light: var(--color-teal-950);
    --color-badge-teal-strong: var(--color-teal-400);
    --color-badge-teal-dark: var(--color-teal-300);

    --color-badge-cyan-light: var(--color-cyan-950);
    --color-badge-cyan-strong: var(--color-cyan-400);
    --color-badge-cyan-dark: var(--color-cyan-300);

    --color-badge-sky-light: var(--color-sky-950);
    --color-badge-sky-strong: var(--color-sky-400);
    --color-badge-sky-dark: var(--color-sky-300);

    --color-badge-blue-light: var(--color-blue-950);
    --color-badge-blue-strong: var(--color-blue-400);
    --color-badge-blue-dark: var(--color-blue-300);

    --color-badge-indigo-light: var(--color-indigo-950);
    --color-badge-indigo-strong: var(--color-indigo-400);
    --color-badge-indigo-dark: var(--color-indigo-300);

    --color-badge-violet-light: var(--color-violet-950);
    --color-badge-violet-strong: var(--color-violet-400);
    --color-badge-violet-dark: var(--color-violet-300);

    --color-badge-purple-light: var(--color-purple-950);
    --color-badge-purple-strong: var(--color-purple-400);
    --color-badge-purple-dark: var(--color-purple-300);

    --color-badge-fuchsia-light: var(--color-fuchsia-950);
    --color-badge-fuchsia-strong: var(--color-fuchsia-400);
    --color-badge-fuchsia-dark: var(--color-fuchsia-300);

    --color-badge-pink-light: var(--color-pink-950);
    --color-badge-pink-strong: var(--color-pink-400);
    --color-badge-pink-dark: var(--color-pink-300);

    --color-badge-rose-light: var(--color-rose-900);
    --color-badge-rose-strong: var(--color-rose-400);
    --color-badge-rose-dark: var(--color-rose-300);

    /* ========================================
     * MISC TOKENS
     * ======================================== */
    --color-data-viz-1: #ffffff;
    --temp-token: #ffffff;
}