/**
 * Aurora Mint Design System - Design Tokens
 *
 * All UI code MUST use these tokens. Never hardcode colors, spacing, or other values.
 * Theme-specific colors live in named [data-theme] blocks.
 */

:root {
  /* ========== Spacing (4px grid system) ========== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ========== Border Radii ========== */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-full: 9999px;

  /* ========== Foundation: Size / Density ========== */
  --control-height-sm: 28px;
  --control-height-md: 32px;
  --control-height-lg: 40px;
  --icon-button-size-sm: 28px;
  --icon-button-size-md: 32px;
  --icon-button-size-lg: 40px;
  --list-row-height-compact: 32px;
  --list-row-height-regular: 40px;
  --toolbar-height-compact: 32px;
  --toolbar-height-regular: 40px;
  --panel-header-height: 40px;

  /* ========== Foundation: Spacing / Rhythm ========== */
  --gap-hairline: calc(var(--sp-1) / 4);
  --gap-compact: calc(var(--sp-1) / 2);
  --gap-micro: calc(var(--sp-1) - (var(--sp-1) / 4));
  --gap-control: var(--sp-1);
  --gap-tight: calc(var(--sp-1) + (var(--sp-1) / 2));
  --gap-default: var(--sp-2);
  --gap-content: var(--sp-3);
  --gap-panel: var(--sp-4);
  --gap-section: var(--sp-6);
  --space-micro: var(--gap-compact);
  --space-inline: var(--gap-control);
  --space-tight: var(--gap-tight);
  --space-default: var(--gap-default);
  --space-content: var(--gap-content);
  --space-block: var(--gap-panel);
  --space-panel: var(--gap-section);
  --space-section: var(--sp-8);
  --inset-control-inline: var(--sp-3);
  --inset-control-block: var(--sp-2);
  --inset-row-inline: var(--sp-4);
  --inset-row-block: var(--sp-2);
  --inset-chip-inline: var(--sp-2);
  --inset-chip-block: var(--sp-1);
  --inset-panel: var(--sp-4);
  --inset-dialog: var(--sp-6);

  /* ========== Foundation: Radius Roles ========== */
  --radius-control: var(--radius-md);
  --radius-control-sm: var(--radius-sm);
  --radius-control-lg: var(--radius-lg);
  --radius-chip: var(--radius-full);
  --radius-tag: var(--radius-full);
  --radius-pill: var(--radius-full);
  --radius-panel: var(--radius-xl);
  --radius-overlay: var(--radius-xl);
  --radius-local-overlay: var(--radius-lg);
  --radius-flush: 0px;

  /* ========== Domain: Monitoring ========== */
  --monitoring-surface-radius: var(--radius-panel);
  --monitoring-card-radius: var(--radius-control-lg);
  --monitoring-item-radius: var(--radius-control-lg);
  --monitoring-chip-radius: var(--radius-pill);
  --monitoring-hero-gap: var(--sp-3);
  --monitoring-hero-padding: var(--sp-3);
  --monitoring-hero-copy-gap: var(--sp-1);
  --monitoring-hero-meta-margin-top: var(--sp-2);
  --monitoring-hero-side-gap: var(--sp-1);
  --monitoring-status-card-gap: var(--sp-1);
  --monitoring-status-card-padding: var(--sp-3);
  --monitoring-hero-action-gap: var(--sp-1);
  --monitoring-hero-action-padding: var(--sp-2);
  --monitoring-hero-title-size: var(--type-heading-3-size);
  --monitoring-hero-title-size-mobile: var(--type-heading-5-size);
  --monitoring-hero-title-line-height: var(--type-heading-3-line-height);
  --monitoring-hero-title-line-height-mobile: var(--type-heading-5-line-height);
  --monitoring-kpi-value-size: var(--type-heading-3-size);
  --monitoring-kpi-value-size-mobile: var(--type-heading-4-size);
  --monitoring-hero-action-value-size: var(--type-heading-5-size);
  --monitoring-hero-action-value-size-mobile: var(--type-body-3-size);
  --monitoring-sparkline-height: calc(var(--sp-16) + var(--sp-2));
  --monitoring-sparkline-height-compact: var(--control-height-sm);
  --monitoring-sparkline-width-compact: calc(var(--sp-16) + var(--sp-8));
  --monitoring-sparkline-stroke-width: 1.5;

  /* ========== Foundation: State / Interaction ========== */
  --state-focus-ring-color: var(--border-focus);
  --state-focus-ring-width: 2px;
  --state-hover-bg-subtle: var(--surface-hover);
  --state-hover-bg-strong: var(--surface-active);
  --state-active-bg: var(--surface-active);
  --state-selected-bg: color-mix(in srgb, var(--status-info-fg) 12%, var(--surface-panel));
  --state-selected-border: color-mix(in srgb, var(--status-info-fg) 22%, transparent);
  --state-disabled-bg: var(--surface-disabled);
  --state-disabled-border: var(--border-default);
  --state-disabled-text: var(--text-disabled);
  --state-success-bg: color-mix(in srgb, var(--status-success-fg) 14%, transparent);
  --state-success-border: color-mix(in srgb, var(--status-success-fg) 28%, transparent);
  --state-success-text: var(--status-success-fg);
  --state-success-icon: var(--icon-success);
  --state-warning-bg: color-mix(in srgb, var(--status-warning-fg) 14%, transparent);
  --state-warning-border: color-mix(in srgb, var(--status-warning-fg) 28%, transparent);
  --state-warning-text: var(--status-warning-fg);
  --state-warning-icon: var(--icon-warning);
  --state-error-bg: color-mix(in srgb, var(--status-danger-fg) 14%, transparent);
  --state-error-border: color-mix(in srgb, var(--status-danger-fg) 28%, transparent);
  --state-error-text: var(--status-danger-fg);
  --state-error-icon: var(--icon-error);
  --state-info-bg: color-mix(in srgb, var(--status-info-fg) 14%, transparent);
  --state-info-border: color-mix(in srgb, var(--status-info-fg) 28%, transparent);
  --state-info-text: var(--status-info-fg);
  --state-info-icon: var(--icon-info);

  /* ========== Foundation: Surface / Overlay ========== */
  --surface-page-bg: var(--surface-page);
  --surface-panel-bg: var(--surface-panel);
  --surface-elevated-bg: var(--surface-elevated);
  --surface-overlay-bg: color-mix(in srgb, var(--surface-elevated) 96%, transparent);
  --surface-overlay-border: var(--border-default);
  --surface-overlay-shadow: var(--shadow-lg);
  --surface-overlay-backdrop: color-mix(in srgb, var(--surface-page) 72%, black 28%);
  --surface-sticky-bg: color-mix(in srgb, var(--surface-page) 96%, var(--surface-panel) 4%);
  --overlay-width-sm: 360px;
  --overlay-width-md: 480px;
  --overlay-width-lg: 680px;
  --overlay-backdrop-opacity: 0.48;

  /* ========== Workspace Material System ========== */
  --ws-backdrop-filter: none;
  --ws-content-bg: transparent;

  --ws-level-0: transparent;
  --ws-level-1: color-mix(
    in srgb,
    var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 40%),
    transparent
  );
  --ws-level-2: color-mix(
    in srgb,
    var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 56%),
    transparent
  );
  --ws-level-3: color-mix(
    in srgb,
    var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 72%),
    transparent
  );
  --ws-level-4: color-mix(
    in srgb,
    var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 88%),
    transparent
  );

  /* ========== Foundation: Code Surface Sub-Specs ========== */
  --terminal-panel-inset: 2px;
  --terminal-toolbar-gap: var(--gap-default);
  --terminal-local-overlay-radius: 2px;
  --terminal-state-running-bg: var(--state-info-bg);
  --terminal-state-running-border: var(--state-info-border);
  --terminal-state-running-text: var(--state-info-text);
  --terminal-state-reconnecting-bg: var(--state-warning-bg);
  --terminal-state-reconnecting-border: var(--state-warning-border);
  --terminal-state-failed-bg: var(--state-error-bg);
  --terminal-state-failed-border: var(--state-error-border);
  --session-card-gap: var(--gap-content);
  --session-row-gap: var(--gap-default);
  --session-state-radius: var(--radius-chip);
  --editor-pane-inset: var(--inset-panel);
  --editor-toolbar-inset: var(--inset-control-inline);
  --editor-peek-radius: var(--radius-overlay);
  --editor-selection-bg: var(--state-selected-bg);
  --editor-selection-inactive-bg: color-mix(in srgb, var(--state-selected-bg) 60%, transparent);
  --editor-diagnostic-warning-bg: var(--state-warning-bg);
  --editor-diagnostic-error-bg: var(--state-error-bg);
  --diff-section-gap: var(--gap-section);
  --diff-thread-inset: var(--inset-row-inline);
  --diff-thread-radius: var(--radius-panel);
  --diff-add-bg: var(--state-success-bg);
  --diff-modify-bg: var(--state-info-bg);
  --diff-delete-bg: var(--state-error-bg);

  /* ========== Typography ========== */
  --font-sans:
    "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
    sans-serif;
  --font-mono: "JetBrains Mono", "Sarasa Mono SC", "PingFang SC", monospace;

  /* Font Sizes */
  --font-size-100: 11px;
  --font-size-200: 12px;
  --font-size-300: 14px;
  --font-size-400: 16px;
  --font-size-500: 18px;
  --font-size-600: 24px;
  --font-size-700: 32px;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-lg: 14px;
  --text-xl: 16px;
  --text-2xl: 18px;
  --text-3xl: 20px;

  --type-heading-1-size: 28px;
  --type-heading-1-line-height: 1.1;
  --type-heading-1-weight: var(--font-semibold);
  --type-heading-2-size: 24px;
  --type-heading-2-line-height: 1.15;
  --type-heading-2-weight: var(--font-semibold);
  --type-heading-3-size: 20px;
  --type-heading-3-line-height: 1.2;
  --type-heading-3-weight: var(--font-semibold);
  --type-heading-4-size: 18px;
  --type-heading-4-line-height: 1.25;
  --type-heading-4-weight: var(--font-normal);
  --type-heading-5-size: 16px;
  --type-heading-5-line-height: 1.3;
  --type-heading-5-weight: var(--font-normal);
  --type-heading-6-size: 14px;
  --type-heading-6-line-height: 1.35;
  --type-heading-6-weight: var(--font-normal);

  --type-body-1-size: 18px;
  --type-body-1-line-height: 1.6;
  --type-body-1-weight: var(--font-normal);
  --type-body-2-size: 16px;
  --type-body-2-line-height: 1.6;
  --type-body-2-weight: var(--font-normal);
  --type-body-3-size: 14px;
  --type-body-3-line-height: 1.6;
  --type-body-3-weight: var(--font-normal);
  --type-body-4-size: 13px;
  --type-body-4-line-height: 1.5;
  --type-body-4-weight: var(--font-normal);
  --type-body-5-size: 12px;
  --type-body-5-line-height: 1.45;
  --type-body-5-weight: var(--font-normal);
  --type-body-6-size: 11px;
  --type-body-6-line-height: 1.4;
  --type-body-6-weight: var(--font-normal);

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ========== Transitions ========== */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 100ms;
  --duration-normal: 150ms;
  --duration-slow: 200ms;
  --duration-slower: 300ms;

  /* ========== Z-Index Scale ========== */
  --z-inline: 1;
  --z-inline-raised: 2;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-local-overlay: 240;
  --z-sheet-backdrop: 300;
  --z-sheet: 310;
  --z-modal-backdrop: 320;
  --z-modal: 330;
  --z-drawer-backdrop: 340;
  --z-drawer: 350;
  --z-workbench-backdrop: 360;
  --z-workbench: 370;
  --z-popover: 380;
  --z-tooltip: 390;
  --z-toast: 400;

  /* ========== Visual稿别名 (short aliases) ========== */
  --text: var(--text-primary);
  --text-sec: var(--text-secondary);
  --text-ter: var(--text-tertiary);
  --sans: var(--font-sans);
  --mono: var(--font-mono);

  /* ========== Component-Specific Tokens ========== */

  /* Buttons */
  --btn-height-sm: 28px;
  --btn-height-md: 32px;
  --btn-height-lg: 40px;

  /* Inputs */
  --input-height-sm: 28px;
  --input-height-md: 32px;
  --input-height-lg: 40px;

  /* Topbar */
  --topbar-height: 36px;
  --desktop-topbar-height: 40px;
  --desktop-statusbar-height: 28px;
  --desktop-sidebar-header-height: 40px;
  --desktop-panel-padding: 12px;
  --desktop-panel-gap: 12px;
  --desktop-content-max-width: 880px;
  --desktop-modal-max-width-md: 680px;
  --desktop-modal-max-width-lg: 840px;

  /* Safe areas */
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-safe-right: env(safe-area-inset-right, 0px);
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-left: env(safe-area-inset-left, 0px);

  /* Panels */
  --panel-min-width: 200px;
  --panel-max-width: 600px;
  --nav-width: 280px;

  /* Terminal */
  --terminal-font-size: 11px;
  --terminal-line-height: 1.6;
  --terminal-scrollback: 5000;
  --terminal-height: 200px;
  --terminal-bg: var(--surface-input);
  --terminal-border: var(--border-default);
  --terminal-text: var(--text-primary);
  --terminal-accent: var(--status-info-fg);
  --session-bg: var(--surface-panel);
  --session-border: var(--border-default);
  --session-text: var(--text-primary);
  --session-accent: var(--status-success-fg);
  --editor-bg: var(--surface-panel);
  --editor-border: var(--border-default);
  --editor-text: var(--text-primary);
  --editor-gutter: var(--text-tertiary);
  --diff-added-bg: color-mix(in srgb, var(--status-success-fg) 18%, transparent);
  --diff-added-border: color-mix(in srgb, var(--status-success-fg) 48%, var(--border-default));
  --diff-removed-bg: color-mix(in srgb, var(--status-danger-fg) 18%, transparent);
  --diff-removed-border: color-mix(in srgb, var(--status-danger-fg) 48%, var(--border-default));
  --diff-modified-bg: color-mix(in srgb, var(--status-warning-fg) 18%, transparent);
  --diff-modified-border: color-mix(in srgb, var(--status-warning-fg) 48%, var(--border-default));

  /* Status Dot */
  --status-dot-size: 8px;

  /* Workspace Tab Session Mini Map */
  --workspace-session-map-running: var(--state-success-text);
  --workspace-session-map-starting: var(--state-warning-text);
  --workspace-session-map-idle: color-mix(
    in srgb,
    var(--text-tertiary) 90%,
    var(--status-info-fg) 10%
  );
  --workspace-session-map-empty: color-mix(
    in srgb,
    var(--text-tertiary) 56%,
    var(--surface-panel) 44%
  );

  /* Progress Bar */
  --progress-height: 4px;

  /* Scrollbar */
  --scrollbar-width: 8px;
  --scrollbar-track: color-mix(in srgb, var(--surface-panel) 86%, var(--border-default) 14%);
  --scrollbar-thumb: color-mix(in srgb, var(--border-default) 74%, var(--status-info-fg) 26%);

  /* ========== Touch / Pointer (Mobile-Friendly Phase 0) ========== */
  /* Desktop defaults - overridden below for narrow viewport or coarse pointer. */
  --touch-target-min: 32px;
  --touch-target-comfortable: 40px;
  --touch-target-large: 44px;
  --touch-spacing-min: 8px;
  --touch-hit-slop: 0px;
}

:root,
[data-theme="mint-dark"],
[data-theme="mint-light"],
[data-theme="graphite-dark"],
[data-theme="graphite-light"],
[data-theme="nord-dark"],
[data-theme="nord-light"],
[data-theme="spring-dark"],
[data-theme="spring-light"],
[data-theme="summer-dark"],
[data-theme="summer-light"],
[data-theme="autumn-dark"],
[data-theme="autumn-light"],
[data-theme="winter-dark"],
[data-theme="winter-light"],
[data-theme="hc-dark"],
[data-theme="hc-light"] {
  /* Private reference layer */
  --ref-fg-0: #e5edf3;
  --ref-fg-1: #9fb0bc;
  --ref-fg-2: #728492;
  --ref-fg-3: #4a5b6a;
  --ref-fg-inverse: #0a1014;
  --ref-bg-0: #0a1014;
  --ref-bg-1: #11181f;
  --ref-bg-2: #0d141a;
  --ref-bg-3: #151f28;
  --ref-bg-4: #1a2632;
  --ref-bg-5: #1e3040;
  --ref-bg-6: #22303c;
  --ref-border-0: #1e2a35;
  --ref-border-1: #263545;
  --ref-border-2: #314454;
  --ref-border-focus: #6cb6ff;
  --ref-border-danger: #ff9eb0;
  --ref-status-success: #78d7b2;
  --ref-status-warning: #f1b86a;
  --ref-status-danger: #ff9eb0;
  --ref-status-info: #6cb6ff;

  /* Public semantic layer */
  --text-primary: var(--ref-fg-0);
  --text-secondary: var(--ref-fg-1);
  --text-tertiary: var(--ref-fg-2);
  --text-disabled: var(--ref-fg-3);
  --text-inverse: var(--ref-fg-inverse);
  --text-link: var(--ref-status-info);
  --text-link-hover: color-mix(in srgb, var(--ref-status-info) 82%, white 18%);

  --surface-page: var(--ref-bg-0);
  --surface-panel: color-mix(in srgb, var(--ref-bg-1) 94%, var(--ref-bg-0));
  --surface-elevated: color-mix(in srgb, var(--ref-bg-1) 98%, white 2%);
  --surface-input: var(--ref-bg-2);
  --surface-muted: var(--ref-bg-2);
  --surface-hover: var(--ref-bg-4);
  --surface-active: var(--ref-bg-5);
  --surface-disabled: var(--ref-bg-3);

  --border-default: var(--ref-border-0);
  --border-subtle: var(--ref-border-1);
  --border-strong: var(--ref-border-2);
  --border-focus: var(--ref-border-focus);
  --border-danger: var(--ref-border-danger);

  --status-success-fg: var(--ref-status-success);
  --status-success-bg: color-mix(in srgb, var(--ref-status-success) 18%, var(--surface-panel));
  --status-success-border: color-mix(in srgb, var(--ref-status-success) 48%, var(--border-default));
  --status-success-icon: var(--ref-status-success);
  --status-warning-fg: var(--ref-status-warning);
  --status-warning-bg: color-mix(in srgb, var(--ref-status-warning) 18%, var(--surface-panel));
  --status-warning-border: color-mix(in srgb, var(--ref-status-warning) 48%, var(--border-default));
  --status-warning-icon: var(--ref-status-warning);
  --status-danger-fg: var(--ref-status-danger);
  --status-danger-bg: color-mix(in srgb, var(--ref-status-danger) 18%, var(--surface-panel));
  --status-danger-border: color-mix(in srgb, var(--ref-status-danger) 48%, var(--border-default));
  --status-danger-icon: var(--ref-status-danger);
  --status-info-fg: var(--ref-status-info);
  --status-info-bg: color-mix(in srgb, var(--ref-status-info) 18%, var(--surface-panel));
  --status-info-border: color-mix(in srgb, var(--ref-status-info) 48%, var(--border-default));
  --status-info-icon: var(--ref-status-info);

  /* Material layer */
  --material-backdrop-filter: none;
  --material-panel: var(--surface-panel);
  --material-elevated: var(--surface-elevated);
  --material-overlay: color-mix(
    in srgb,
    var(--surface-elevated) calc(var(--app-surface-opacity, 0.96) * 100%),
    transparent
  );
  --material-local-overlay: color-mix(
    in srgb,
    var(--surface-panel) calc(var(--app-surface-opacity, 0.92) * 100%),
    transparent
  );
  --material-shell-page: color-mix(
    in srgb,
    var(--surface-page) calc(var(--app-surface-opacity, 0.96) * 100%),
    transparent
  );
  --material-shell-topbar: color-mix(
    in srgb,
    var(--surface-elevated) calc(var(--app-surface-opacity, 0.96) * 100%),
    transparent
  );

  --workspace-sidebar-surface: var(--surface-panel);
  --workspace-activitybar-surface: var(--surface-panel);
  --workspace-statusbar-surface: var(--surface-panel);
  --workspace-session-surface: var(--surface-panel);
  --workspace-session-active-surface: var(--surface-elevated);
  --workspace-session-header-surface: var(--surface-elevated);
  --workspace-terminal-shell-surface: var(--surface-panel);
  --workspace-terminal-toolbar-surface: var(--surface-elevated);
  --workspace-terminal-tabs-surface: var(--surface-elevated);
  --workspace-editor-shell-surface: var(--surface-panel);
  --workspace-editor-toolbar-surface: var(--surface-elevated);
  --workspace-editor-toolbar-border: color-mix(
    in srgb,
    var(--border-default) 72%,
    var(--status-info-fg) 28%
  );
  --workspace-content-surface: transparent;
  --settings-header-surface: var(--material-overlay);
  --settings-sidebar-surface: var(--material-overlay);
  --topbar-surface: var(--material-overlay);
  --workspace-page-surface: var(--material-shell-page);
  --workspace-session-idle-surface: var(--material-overlay);
  --workspace-session-idle-header-surface: var(--material-overlay);
  --workspace-bottom-terminal-surface: var(--material-overlay);
  --agent-draft-surface: linear-gradient(
    180deg,
    color-mix(in srgb, var(--material-overlay) 78%, var(--surface-panel) 22%),
    color-mix(in srgb, var(--material-overlay) 64%, var(--surface-page) 36%)
  );
  --agent-provider-card-surface: color-mix(in srgb, var(--material-overlay) 44%, transparent);
  --mobile-sheet-file-surface: color-mix(
    in srgb,
    var(--material-overlay) 100%,
    color-mix(in srgb, var(--surface-panel) 80%, transparent)
  );
  --workspace-session-mobile-active-surface: color-mix(
    in srgb,
    var(--surface-active) 76%,
    var(--material-overlay) 24%
  );
  --selection-accent-bg: color-mix(in srgb, var(--status-info-fg) 18%, transparent);
  --editor-dirty-indicator-fg: var(--status-warning-fg);
  --session-focus-pulse-color: var(--status-success-fg);

  /* Domain/component-role layer */
  --git-status-added-fg: var(--status-success-fg);
  --git-status-added-bg: var(--status-success-bg);
  --git-status-added-border: var(--status-success-border);
  --git-status-modified-fg: var(--status-warning-fg);
  --git-status-modified-bg: var(--status-warning-bg);
  --git-status-modified-border: var(--status-warning-border);
  --git-status-deleted-fg: var(--status-danger-fg);
  --git-status-deleted-bg: var(--status-danger-bg);
  --git-status-deleted-border: var(--status-danger-border);
  --git-status-untracked-fg: var(--status-info-fg);
  --git-status-untracked-bg: var(--status-info-bg);
  --git-status-untracked-border: var(--status-info-border);
  --git-status-renamed-fg: var(--status-info-fg);
  --git-status-renamed-bg: var(--status-info-bg);
  --git-status-renamed-border: var(--status-info-border);

  --diff-added-bg: var(--status-success-bg);
  --diff-added-border: var(--status-success-border);
  --diff-added-fg: var(--status-success-fg);
  --diff-modified-bg: var(--status-info-bg);
  --diff-modified-border: var(--status-info-border);
  --diff-modified-fg: var(--status-info-fg);
  --diff-deleted-bg: var(--status-danger-bg);
  --diff-deleted-border: var(--status-danger-border);
  --diff-deleted-fg: var(--status-danger-fg);

  --icon-primary: var(--text-primary);
  --icon-secondary: var(--text-secondary);
  --icon-muted: var(--text-tertiary);
  --icon-accent: var(--status-success-icon);
  --icon-success: var(--status-success-icon);
  --icon-warning: var(--status-warning-icon);
  --icon-error: var(--status-danger-icon);
  --icon-info: var(--status-info-icon);
  --icon-file-folder: #8adfc0;
  --icon-file-code: var(--status-info-fg);
  --icon-file-data: var(--accent-purple);
  --icon-file-doc: #d7e2ec;
  --icon-file-media: #ffb7c5;
  --icon-file-default: var(--text-secondary);
  --icon-git-staged: var(--status-success-fg);
  --icon-git-modified: var(--status-warning-fg);
  --icon-git-deleted: var(--status-danger-fg);
  --icon-git-untracked: var(--status-info-fg);
  --icon-surface-subtle: color-mix(in srgb, var(--text-secondary) 18%, var(--surface-panel));
  --icon-surface-accent: color-mix(in srgb, var(--icon-accent) 24%, var(--surface-panel));
  --icon-surface-success: color-mix(in srgb, var(--status-success-fg) 24%, var(--surface-panel));
  --icon-surface-warning: color-mix(in srgb, var(--status-warning-fg) 24%, var(--surface-panel));
  --icon-surface-error: color-mix(in srgb, var(--status-danger-fg) 24%, var(--surface-panel));
  --icon-surface-info: color-mix(in srgb, var(--status-info-fg) 24%, var(--surface-panel));

  --control-focus-ring: 0 0 0 calc(var(--state-focus-ring-width) * 2)
    color-mix(in srgb, var(--border-focus) 35%, transparent);
  --control-primary-bg: var(--status-info-fg);
  --control-primary-bg-hover: color-mix(in srgb, var(--status-info-fg) 84%, white 16%);
  --control-primary-fg: var(--text-inverse);
  --control-secondary-bg: color-mix(in srgb, var(--surface-panel) 84%, var(--status-info-fg) 16%);
  --control-secondary-bg-hover: color-mix(
    in srgb,
    var(--surface-hover) 72%,
    var(--status-info-fg) 28%
  );
  --control-secondary-border: color-mix(
    in srgb,
    var(--border-default) 70%,
    var(--status-info-fg) 30%
  );
  --control-secondary-border-hover: color-mix(
    in srgb,
    var(--border-subtle) 70%,
    var(--status-info-fg) 30%
  );
  --control-ghost-bg-hover: var(--surface-hover);
  --control-ghost-fg: var(--text-secondary);
  --control-danger-bg: var(--status-danger-fg);
  --control-danger-fg: var(--text-inverse);
  --control-spinner-track: color-mix(in srgb, currentColor 30%, var(--surface-page) 70%);

  --field-bg: var(--surface-page);
  --field-border: var(--border-default);
  --field-border-hover: var(--border-subtle);
  --field-ring: 0 0 0 var(--state-focus-ring-width)
    color-mix(in srgb, var(--border-focus) 40%, transparent);
  --field-invalid-ring: 0 0 0 1px color-mix(in srgb, var(--border-danger) 70%, transparent 30%);
  --kbd-surface: color-mix(in srgb, var(--surface-input) 82%, var(--surface-panel) 18%);
  --menu-danger-hover-bg: color-mix(in srgb, var(--status-danger-fg) 10%, var(--surface-panel));

  --tag-info-bg: color-mix(in srgb, var(--status-info-fg) 15%, transparent);
  --tag-info-fg: var(--status-info-fg);
  --tag-success-bg: color-mix(in srgb, var(--status-success-fg) 15%, transparent);
  --tag-success-fg: var(--status-success-fg);
  --tag-warning-bg: color-mix(in srgb, var(--status-warning-fg) 15%, transparent);
  --tag-warning-fg: var(--status-warning-fg);
  --tag-danger-bg: color-mix(in srgb, var(--status-danger-fg) 15%, transparent);
  --tag-danger-fg: var(--status-danger-fg);
  --tag-accent-bg: color-mix(in srgb, var(--text-secondary) 15%, transparent);
  --tag-accent-fg: var(--text-secondary);

  --status-dot-idle: var(--text-tertiary);
  --status-dot-starting: var(--status-warning-fg);
  --status-dot-running: var(--status-info-fg);
  --status-dot-complete: var(--status-success-fg);
  --status-dot-error: var(--status-danger-fg);
  --status-dot-idle-ring: color-mix(in srgb, var(--status-dot-idle) 18%, transparent);
  --status-dot-starting-ring: color-mix(in srgb, var(--status-dot-starting) 18%, transparent);
  --status-dot-running-ring-1: color-mix(in srgb, var(--status-info-fg) 26%, transparent);
  --status-dot-running-ring-2: color-mix(in srgb, var(--status-info-fg) 12%, transparent);
  --status-dot-running-ring-3: color-mix(in srgb, var(--status-info-fg) 22%, transparent);
  --status-dot-running-ring-ghost: color-mix(in srgb, var(--status-dot-running) 28%, transparent);
  --status-dot-running-ring-outer: color-mix(in srgb, var(--status-dot-running) 34%, transparent);
  --status-dot-complete-ring: color-mix(in srgb, var(--status-dot-complete) 18%, transparent);
  --status-dot-error-ring: color-mix(in srgb, var(--status-dot-error) 18%, transparent);

  /* ========== Centralized Derived Component Visual Tokens ========== */
  --component-mix-surface-panel-98pct-transparent: color-mix(
    in srgb,
    var(--surface-panel) 98%,
    transparent
  );
  --component-mix-surface-page-96pct-surface-panel-4pct: color-mix(
    in srgb,
    var(--surface-page) 96%,
    var(--surface-panel) 4%
  );
  --component-mix-border-default-82pct-transparent: color-mix(
    in srgb,
    var(--border-default) 82%,
    transparent
  );
  --component-mix-surface-panel-66pct-transparent: color-mix(
    in srgb,
    var(--surface-panel) 66%,
    transparent
  );
  --component-mix-text-tertiary-92pct-surface-panel: color-mix(
    in srgb,
    var(--text-tertiary) 92%,
    var(--surface-panel)
  );
  --component-mix-border-default-96pct-transparent: color-mix(
    in srgb,
    var(--border-default) 96%,
    transparent
  );
  --component-mix-status-info-fg-12pct-surface-panel: color-mix(
    in srgb,
    var(--status-info-fg) 12%,
    var(--surface-panel)
  );
  --component-mix-status-info-fg-14pct-surface-panel: color-mix(
    in srgb,
    var(--status-info-fg) 14%,
    var(--surface-panel)
  );
  --component-mix-border-focus-64pct-transparent: color-mix(
    in srgb,
    var(--border-focus) 64%,
    transparent
  );
  --component-mix-status-info-fg-52pct-text-secondary: color-mix(
    in srgb,
    var(--status-info-fg) 52%,
    var(--text-secondary)
  );
  --component-mix-surface-panel-92pct-surface-page: color-mix(
    in srgb,
    var(--surface-panel) 92%,
    var(--surface-page)
  );
  --component-mix-surface-panel-94pct-surface-page: color-mix(
    in srgb,
    var(--surface-panel) 94%,
    var(--surface-page)
  );
  --component-mix-border-default-84pct-transparent: color-mix(
    in srgb,
    var(--border-default) 84%,
    transparent
  );
  --component-mix-status-info-fg-10pct-surface-panel: color-mix(
    in srgb,
    var(--status-info-fg) 10%,
    var(--surface-panel)
  );
  --component-mix-border-default-64pct-transparent: color-mix(
    in srgb,
    var(--border-default) 64%,
    transparent
  );
  --component-mix-surface-page-82pct-surface-panel-18pct: color-mix(
    in srgb,
    var(--surface-page) 82%,
    var(--surface-panel) 18%
  );
  --component-mix-border-default-76pct-transparent: color-mix(
    in srgb,
    var(--border-default) 76%,
    transparent
  );
  --component-mix-surface-page-94pct-surface-panel-6pct: color-mix(
    in srgb,
    var(--surface-page) 94%,
    var(--surface-panel) 6%
  );
  --component-mix-status-info-fg-72pct-transparent: color-mix(
    in srgb,
    var(--status-info-fg) 72%,
    transparent
  );
  --component-mix-status-info-fg-74pct-text-primary: color-mix(
    in srgb,
    var(--status-info-fg) 74%,
    var(--text-primary)
  );
  --component-mix-border-default-44pct-transparent: color-mix(
    in srgb,
    var(--border-default) 44%,
    transparent
  );
  --component-mix-status-danger-fg-76pct-text-primary: color-mix(
    in srgb,
    var(--status-danger-fg) 76%,
    var(--text-primary)
  );
  --component-mix-status-info-fg-42pct-border-default-58pct: color-mix(
    in srgb,
    var(--status-info-fg) 42%,
    var(--border-default) 58%
  );
  --component-mix-status-info-fg-18pct-transparent: color-mix(
    in srgb,
    var(--status-info-fg) 18%,
    transparent
  );
  --component-mix-state-info-text-55pct-transparent: color-mix(
    in srgb,
    var(--state-info-text) 55%,
    transparent
  );
  --component-mix-state-info-bg-12pct-transparent: color-mix(
    in srgb,
    var(--state-info-bg) 12%,
    transparent
  );
  --component-mix-state-info-text-18pct-transparent: color-mix(
    in srgb,
    var(--state-info-text) 18%,
    transparent
  );
  --component-mix-border-default-78pct-transparent: color-mix(
    in srgb,
    var(--border-default) 78%,
    transparent
  );
  --component-mix-surface-input-72pct-surface-panel-28pct: color-mix(
    in srgb,
    var(--surface-input) 72%,
    var(--surface-panel) 28%
  );
  --component-mix-border-default-70pct-transparent: color-mix(
    in srgb,
    var(--border-default) 70%,
    transparent
  );
  --component-mix-surface-panel-82pct-transparent: color-mix(
    in srgb,
    var(--surface-panel) 82%,
    transparent
  );
  --component-mix-surface-panel-78pct-transparent: color-mix(
    in srgb,
    var(--surface-panel) 78%,
    transparent
  );
  --component-mix-border-default-68pct-transparent: color-mix(
    in srgb,
    var(--border-default) 68%,
    transparent
  );
  --component-mix-surface-panel-74pct-transparent: color-mix(
    in srgb,
    var(--surface-panel) 74%,
    transparent
  );
  --component-mix-surface-input-82pct-surface-panel-18pct: color-mix(
    in srgb,
    var(--surface-input) 82%,
    var(--surface-panel) 18%
  );
  --component-mix-surface-page-92pct-surface-input-8pct: color-mix(
    in srgb,
    var(--surface-page) 92%,
    var(--surface-input) 8%
  );
  --component-mix-border-default-56pct-transparent: color-mix(
    in srgb,
    var(--border-default) 56%,
    transparent
  );
  --component-mix-surface-page-78pct-surface-panel-22pct: color-mix(
    in srgb,
    var(--surface-page) 78%,
    var(--surface-panel) 22%
  );
  --component-mix-surface-page-80pct-surface-panel-20pct: color-mix(
    in srgb,
    var(--surface-page) 80%,
    var(--surface-panel) 20%
  );
  --component-mix-status-info-fg-28pct-border-default: color-mix(
    in srgb,
    var(--status-info-fg) 28%,
    var(--border-default)
  );
  --component-mix-status-info-fg-8pct-surface-panel: color-mix(
    in srgb,
    var(--status-info-fg) 8%,
    var(--surface-panel)
  );
  --component-mix-status-info-fg-42pct-border-default: color-mix(
    in srgb,
    var(--status-info-fg) 42%,
    var(--border-default)
  );
  --component-mix-status-info-fg-84pct-text-primary: color-mix(
    in srgb,
    var(--status-info-fg) 84%,
    var(--text-primary)
  );
  --component-mix-border-default-78pct-status-info-fg-22pct: color-mix(
    in srgb,
    var(--border-default) 78%,
    var(--status-info-fg) 22%
  );
  --component-mix-surface-elevated-92pct-transparent: color-mix(
    in srgb,
    var(--surface-elevated) 92%,
    transparent
  );
  --component-mix-border-default-68pct-status-warning-fg-32pct: color-mix(
    in srgb,
    var(--border-default) 68%,
    var(--status-warning-fg) 32%
  );
  --component-mix-status-info-fg-24pct-transparent: color-mix(
    in srgb,
    var(--status-info-fg) 24%,
    transparent
  );
  --component-mix-border-default-62pct-transparent: color-mix(
    in srgb,
    var(--border-default) 62%,
    transparent
  );
  --component-mix-border-focus-58pct-transparent: color-mix(
    in srgb,
    var(--border-focus) 58%,
    transparent
  );
  --component-mix-state-selected-bg-72pct-transparent: color-mix(
    in srgb,
    var(--state-selected-bg) 72%,
    transparent
  );
  --component-mix-surface-page-97pct-surface-panel-3pct: color-mix(
    in srgb,
    var(--surface-page) 97%,
    var(--surface-panel) 3%
  );
  --component-mix-status-info-fg-88pct-white-12pct: color-mix(
    in srgb,
    var(--status-info-fg) 88%,
    white 12%
  );
  --component-mix-border-default-42pct-transparent: color-mix(
    in srgb,
    var(--border-default) 42%,
    transparent
  );
  --component-mix-status-warning-fg-8pct-surface-panel: color-mix(
    in srgb,
    var(--status-warning-fg) 8%,
    var(--surface-panel)
  );
  --component-mix-border-default-88pct-transparent: color-mix(
    in srgb,
    var(--border-default) 88%,
    transparent
  );
  --component-mix-status-danger-fg-34pct-border-default: color-mix(
    in srgb,
    var(--status-danger-fg) 34%,
    var(--border-default)
  );
  --component-mix-status-danger-fg-84pct-text-primary: color-mix(
    in srgb,
    var(--status-danger-fg) 84%,
    var(--text-primary)
  );
  --component-mix-surface-panel-72pct-status-info-fg-28pct: color-mix(
    in srgb,
    var(--surface-panel) 72%,
    var(--status-info-fg) 28%
  );
  --component-rgba-108-182-255-0-2: rgba(108, 182, 255, 0.2);
  --component-rgba-241-184-106-0-2: rgba(241, 184, 106, 0.2);
  --component-rgba-120-215-178-0-2: rgba(120, 215, 178, 0.2);
  --component-mix-state-success-border-40pct-transparent: color-mix(
    in srgb,
    var(--state-success-border) 40%,
    transparent
  );
  --component-mix-state-info-border-40pct-transparent: color-mix(
    in srgb,
    var(--state-info-border) 40%,
    transparent
  );
  --component-mix-state-warning-border-40pct-transparent: color-mix(
    in srgb,
    var(--state-warning-border) 40%,
    transparent
  );
  --component-mix-state-error-border-40pct-transparent: color-mix(
    in srgb,
    var(--state-error-border) 40%,
    transparent
  );
  --component-mix-surface-hover-76pct-status-info-fg-24pct: color-mix(
    in srgb,
    var(--surface-hover) 76%,
    var(--status-info-fg) 24%
  );
  --component-mix-surface-panel-90pct-surface-page-10pct: color-mix(
    in srgb,
    var(--surface-panel) 90%,
    var(--surface-page) 10%
  );
  --component-mix-surface-panel-88pct-surface-page-12pct: color-mix(
    in srgb,
    var(--surface-panel) 88%,
    var(--surface-page) 12%
  );
  --component-mix-surface-page-44pct-surface-panel-56pct: color-mix(
    in srgb,
    var(--surface-page) 44%,
    var(--surface-panel) 56%
  );
  --component-mix-border-default-68pct-surface-page-32pct: color-mix(
    in srgb,
    var(--border-default) 68%,
    var(--surface-page) 32%
  );
  --component-mix-status-info-fg-7pct-surface-panel-93pct: color-mix(
    in srgb,
    var(--status-info-fg) 7%,
    var(--surface-panel) 93%
  );
  --component-mix-status-info-fg-16pct-transparent: color-mix(
    in srgb,
    var(--status-info-fg) 16%,
    transparent
  );
  --component-mix-border-default-70pct-surface-page-30pct: color-mix(
    in srgb,
    var(--border-default) 70%,
    var(--surface-page) 30%
  );
  --component-mix-surface-page-74pct-surface-panel-26pct: color-mix(
    in srgb,
    var(--surface-page) 74%,
    var(--surface-panel) 26%
  );
  --component-mix-surface-page-82pct-transparent: color-mix(
    in srgb,
    var(--surface-page) 82%,
    transparent
  );
  --component-mix-status-success-fg-60pct-border-default-40pct: color-mix(
    in srgb,
    var(--status-success-fg) 60%,
    var(--border-default) 40%
  );
  --component-mix-status-success-fg-70pct-surface-panel-30pct: color-mix(
    in srgb,
    var(--status-success-fg) 70%,
    var(--surface-panel) 30%
  );
  --component-mix-status-info-fg-62pct-border-default-38pct: color-mix(
    in srgb,
    var(--status-info-fg) 62%,
    var(--border-default) 38%
  );
  --component-mix-status-info-fg-62pct-surface-panel-38pct: color-mix(
    in srgb,
    var(--status-info-fg) 62%,
    var(--surface-panel) 38%
  );
  --component-mix-border-default-72pct-surface-page-28pct: color-mix(
    in srgb,
    var(--border-default) 72%,
    var(--surface-page) 28%
  );
  --component-mix-surface-page-68pct-surface-panel-32pct: color-mix(
    in srgb,
    var(--surface-page) 68%,
    var(--surface-panel) 32%
  );
  --component-mix-icon-file-data-16pct-surface-panel: color-mix(
    in srgb,
    var(--icon-file-data) 16%,
    var(--surface-panel)
  );
  --component-mix-border-default-90pct-transparent: color-mix(
    in srgb,
    var(--border-default) 90%,
    transparent
  );
  --component-mix-surface-panel-88pct-surface-hover: color-mix(
    in srgb,
    var(--surface-panel) 88%,
    var(--surface-hover)
  );
  --component-mix-border-strong-72pct-border-default: color-mix(
    in srgb,
    var(--border-strong) 72%,
    var(--border-default)
  );
  --component-mix-surface-panel-92pct-surface-hover: color-mix(
    in srgb,
    var(--surface-panel) 92%,
    var(--surface-hover)
  );
  --component-mix-icon-success-42pct-transparent: color-mix(
    in srgb,
    var(--icon-success) 42%,
    transparent
  );
  --component-mix-surface-active-78pct-status-warning-fg-22pct: color-mix(
    in srgb,
    var(--surface-active) 78%,
    var(--status-warning-fg) 22%
  );
  --component-mix-state-info-bg-78pct-surface-panel-22pct: color-mix(
    in srgb,
    var(--state-info-bg) 78%,
    var(--surface-panel) 22%
  );
  --component-mix-state-focus-ring-color-24pct-transparent: color-mix(
    in srgb,
    var(--state-focus-ring-color) 24%,
    transparent
  );
  --component-mix-status-info-fg-78pct-white-22pct: color-mix(
    in srgb,
    var(--status-info-fg) 78%,
    white 22%
  );
  --component-mix-status-info-fg-92pct-black-8pct: color-mix(
    in srgb,
    var(--status-info-fg) 92%,
    black 8%
  );
  --component-mix-state-focus-ring-color-35pct-transparent: color-mix(
    in srgb,
    var(--state-focus-ring-color) 35%,
    transparent
  );
  --component-mix-status-info-fg-84pct-white-16pct: color-mix(
    in srgb,
    var(--status-info-fg) 84%,
    white 16%
  );
  --component-mix-surface-panel-84pct-status-info-fg-16pct: color-mix(
    in srgb,
    var(--surface-panel) 84%,
    var(--status-info-fg) 16%
  );
  --component-mix-border-default-70pct-status-info-fg-30pct: color-mix(
    in srgb,
    var(--border-default) 70%,
    var(--status-info-fg) 30%
  );
  --component-mix-surface-hover-72pct-status-info-fg-28pct: color-mix(
    in srgb,
    var(--surface-hover) 72%,
    var(--status-info-fg) 28%
  );
  --component-mix-border-subtle-70pct-status-info-fg-30pct: color-mix(
    in srgb,
    var(--border-subtle) 70%,
    var(--status-info-fg) 30%
  );
  --component-mix-state-focus-ring-color-40pct-transparent: color-mix(
    in srgb,
    var(--state-focus-ring-color) 40%,
    transparent
  );
  --component-mix-status-info-fg-15pct-transparent: color-mix(
    in srgb,
    var(--status-info-fg) 15%,
    transparent
  );
  --component-mix-status-success-fg-15pct-transparent: color-mix(
    in srgb,
    var(--status-success-fg) 15%,
    transparent
  );
  --component-mix-status-warning-fg-15pct-transparent: color-mix(
    in srgb,
    var(--status-warning-fg) 15%,
    transparent
  );
  --component-mix-status-danger-fg-15pct-transparent: color-mix(
    in srgb,
    var(--status-danger-fg) 15%,
    transparent
  );
  --component-mix-text-tertiary-15pct-transparent: color-mix(
    in srgb,
    var(--text-tertiary) 15%,
    transparent
  );
  --component-mix-surface-panel-95pct-status-info-fg-5pct: color-mix(
    in srgb,
    var(--surface-panel) 95%,
    var(--status-info-fg) 5%
  );
  --component-rgba-108-182-255-0-06: rgba(108, 182, 255, 0.06);
  --component-mix-status-info-fg-40pct-transparent: color-mix(
    in srgb,
    var(--status-info-fg) 40%,
    transparent
  );
  --component-mix-border-focus-44pct-transparent-56pct: color-mix(
    in srgb,
    var(--border-focus) 44%,
    transparent 56%
  );
  --component-mix-border-focus-44pct-transparent-56pct: color-mix(
    in srgb,
    var(--border-focus) 44%,
    transparent 56%
  );
  --component-mix-state-selected-bg-80pct-transparent: color-mix(
    in srgb,
    var(--state-selected-bg) 80%,
    transparent
  );
  --component-rgba-108-182-255-0-08: rgba(108, 182, 255, 0.08);
  --component-mix-status-info-fg-white-20pct: color-mix(in srgb, var(--status-info-fg), white 20%);
  --component-rgba-255-255-255-0-02: rgba(255, 255, 255, 0.02);
  --component-rgba-108-182-255-0-05: rgba(108, 182, 255, 0.05);
  --component-rgba-10-16-20-0-88: rgba(10, 16, 20, 0.88);
  --component-mix-surface-hover-72pct-transparent: color-mix(
    in srgb,
    var(--surface-hover) 72%,
    transparent
  );
  --component-rgba-255-255-255-0-04: rgba(255, 255, 255, 0.04);
  --component-rgba-255-255-255-0-015: rgba(255, 255, 255, 0.015);
  --component-mix-surface-input-92pct-surface-page-8pct: color-mix(
    in srgb,
    var(--surface-input) 92%,
    var(--surface-page) 8%
  );
  --component-mix-border-subtle-68pct-status-info-fg-32pct: color-mix(
    in srgb,
    var(--border-subtle) 68%,
    var(--status-info-fg) 32%
  );
  --component-mix-surface-input-90pct-surface-page-10pct: color-mix(
    in srgb,
    var(--surface-input) 90%,
    var(--surface-page) 10%
  );
  --component-mix-surface-panel-90pct-surface-input-10pct: color-mix(
    in srgb,
    var(--surface-panel) 90%,
    var(--surface-input) 10%
  );
  --component-mix-surface-hover-72pct-surface-panel-28pct: color-mix(
    in srgb,
    var(--surface-hover) 72%,
    var(--surface-panel) 28%
  );
  --component-mix-status-info-fg-22pct-transparent: color-mix(
    in srgb,
    var(--status-info-fg) 22%,
    transparent
  );
  --component-rgba-18-26-34-0-94: rgba(18, 26, 34, 0.94);
  --component-rgba-11-18-24-0-98: rgba(11, 18, 24, 0.98);
  --component-mix-border-subtle-66pct-status-info-fg-34pct: color-mix(
    in srgb,
    var(--border-subtle) 66%,
    var(--status-info-fg) 34%
  );
  --component-mix-border-default-72pct-status-info-fg-28pct: color-mix(
    in srgb,
    var(--border-default) 72%,
    var(--status-info-fg) 28%
  );
  --component-rgba-18-26-34-0-96: rgba(18, 26, 34, 0.96);
  --component-rgba-14-21-28-0-92: rgba(14, 21, 28, 0.92);
  --component-blur-12px: blur(12px);
  --component-mix-border-subtle-64pct-status-info-fg-36pct: color-mix(
    in srgb,
    var(--border-subtle) 64%,
    var(--status-info-fg) 36%
  );
  --component-mix-surface-input-96pct-white-4pct: color-mix(
    in srgb,
    var(--surface-input) 96%,
    white 4%
  );
  --component-mix-surface-input-88pct-surface-page-12pct: color-mix(
    in srgb,
    var(--surface-input) 88%,
    var(--surface-page) 12%
  );
  --component-hex-ff5f57: #ff5f57;
  --component-hex-febc2e: #febc2e;
  --component-hex-28c840: #28c840;
  --component-mix-border-subtle-70pct-transparent: color-mix(
    in srgb,
    var(--border-subtle) 70%,
    transparent
  );
  --component-rgba-255-255-255-0-06: rgba(255, 255, 255, 0.06);
  --component-rgba-8-12-16-0-56: rgba(8, 12, 16, 0.56);
  --component-mix-surface-panel-97pct-white-3pct: color-mix(
    in srgb,
    var(--surface-panel) 97%,
    white 3%
  );
  --component-mix-surface-panel-84pct-surface-input-16pct: color-mix(
    in srgb,
    var(--surface-panel) 84%,
    var(--surface-input) 16%
  );
  --component-mix-surface-active-90pct-white-10pct: color-mix(
    in srgb,
    var(--surface-active) 90%,
    white 10%
  );
  --component-mix-surface-active-94pct-surface-panel-6pct: color-mix(
    in srgb,
    var(--surface-active) 94%,
    var(--surface-panel) 6%
  );
  --component-mix-white-6pct-transparent: color-mix(in srgb, white 6%, transparent);
  --component-mix-status-success-fg-12pct-transparent: color-mix(
    in srgb,
    var(--status-success-fg) 12%,
    transparent
  );
  --component-mix-status-info-fg-82pct-white-18pct: color-mix(
    in srgb,
    var(--status-info-fg) 82%,
    white 18%
  );
  --component-hex-081118: #081118;
  --component-mix-border-subtle-72pct-transparent: color-mix(
    in srgb,
    var(--border-subtle) 72%,
    transparent
  );
  --component-rgba-18-26-34-0-8: rgba(18, 26, 34, 0.8);
  --component-rgba-14-21-28-0-28: rgba(14, 21, 28, 0.28);
  --component-mix-text-tertiary-82pct-status-info-fg-18pct: color-mix(
    in srgb,
    var(--text-tertiary) 82%,
    var(--status-info-fg) 18%
  );
  --component-mix-surface-panel-bg-96pct-transparent: color-mix(
    in srgb,
    var(--surface-panel-bg) 96%,
    transparent
  );
  --component-mix-white-4pct-transparent: color-mix(in srgb, white 4%, transparent);
  --component-mix-text-tertiary-78pct-status-info-fg-22pct: color-mix(
    in srgb,
    var(--text-tertiary) 78%,
    var(--status-info-fg) 22%
  );
  --component-mix-status-dot-current-color-var-text-tertiary-12pct-transparent: color-mix(
    in srgb,
    var(--status-dot-current-color, var(--text-tertiary)) 12%,
    transparent
  );
  --component-mix-terminal-state-running-border-32pct-transparent: color-mix(
    in srgb,
    var(--terminal-state-running-border) 32%,
    transparent
  );
  --component-mix-surface-input-98pct-white-2pct: color-mix(
    in srgb,
    var(--surface-input) 98%,
    white 2%
  );
  --component-rgba-120-215-178-0-08: rgba(120, 215, 178, 0.08);
  --component-rgba-108-182-255-0-1: rgba(108, 182, 255, 0.1);
  --component-rgba-17-24-31-0-96: rgba(17, 24, 31, 0.96);
  --component-rgba-10-16-20-0-98: rgba(10, 16, 20, 0.98);
  --component-mix-text-tertiary-80pct-status-info-fg-20pct: color-mix(
    in srgb,
    var(--text-tertiary) 80%,
    var(--status-info-fg) 20%
  );
  --component-rgba-13-20-26-0-96: rgba(13, 20, 26, 0.96);
  --component-rgba-8-13-18-0-98: rgba(8, 13, 18, 0.98);
  --component-rgba-17-24-31-0-98: rgba(17, 24, 31, 0.98);
  --component-rgba-13-20-26-0-92: rgba(13, 20, 26, 0.92);
  --component-rgba-13-20-26-0-98: rgba(13, 20, 26, 0.98);
  --component-rgba-9-15-20-1: rgba(9, 15, 20, 1);
  --component-mix-state-success-border-32pct-transparent: color-mix(
    in srgb,
    var(--state-success-border) 32%,
    transparent
  );
  --component-mix-surface-hover-74pct-surface-panel-26pct: color-mix(
    in srgb,
    var(--surface-hover) 74%,
    var(--surface-panel) 26%
  );
  --component-rgba-255-255-255-0-08: rgba(255, 255, 255, 0.08);
  --component-rgba-108-182-255-0-22: rgba(108, 182, 255, 0.22);
  --component-mix-surface-active-88pct-surface-page-12pct: color-mix(
    in srgb,
    var(--surface-active) 88%,
    var(--surface-page) 12%
  );
  --component-mix-current-color-22pct-transparent: color-mix(
    in srgb,
    currentColor 22%,
    transparent
  );
  --component-mix-current-color-12pct-transparent: color-mix(
    in srgb,
    currentColor 12%,
    transparent
  );
  --component-mix-white-8pct-transparent: color-mix(in srgb, white 8%, transparent);
  --component-mix-current-color-10pct-transparent: color-mix(
    in srgb,
    currentColor 10%,
    transparent
  );
  --component-mix-current-color-16pct-transparent: color-mix(
    in srgb,
    currentColor 16%,
    transparent
  );
  --component-mix-white-50pct-transparent: color-mix(in srgb, white 50%, transparent);
  --component-mix-current-color-8pct-transparent: color-mix(in srgb, currentColor 8%, transparent);
  --component-rgba-43-60-75-0-94: rgba(43, 60, 75, 0.94);
  --component-rgba-30-44-56-0-98: rgba(30, 44, 56, 0.98);
  --component-mix-border-subtle-72pct-status-info-fg-28pct: color-mix(
    in srgb,
    var(--border-subtle) 72%,
    var(--status-info-fg) 28%
  );
  --component-mix-text-tertiary-84pct-status-info-fg-16pct: color-mix(
    in srgb,
    var(--text-tertiary) 84%,
    var(--status-info-fg) 16%
  );
  --component-mix-surface-panel-82pct-surface-page-18pct: color-mix(
    in srgb,
    var(--surface-panel) 82%,
    var(--surface-page) 18%
  );
  --component-mix-border-default-80pct-status-info-fg-20pct: color-mix(
    in srgb,
    var(--border-default) 80%,
    var(--status-info-fg) 20%
  );
  --component-mix-surface-active-86pct-white-14pct: color-mix(
    in srgb,
    var(--surface-active) 86%,
    white 14%
  );
  --component-mix-white-22pct-transparent: color-mix(in srgb, white 22%, transparent);
  --component-mix-surface-panel-94pct-white-6pct: color-mix(
    in srgb,
    var(--surface-panel) 94%,
    white 6%
  );
  --component-mix-surface-input-88pct-surface-panel-12pct: color-mix(
    in srgb,
    var(--surface-input) 88%,
    var(--surface-panel) 12%
  );
  --component-mix-surface-input-94pct-white-6pct: color-mix(
    in srgb,
    var(--surface-input) 94%,
    white 6%
  );
  --component-mix-surface-input-100pct-transparent: color-mix(
    in srgb,
    var(--surface-input) 100%,
    transparent
  );
  --component-mix-surface-input-84pct-surface-page-16pct: color-mix(
    in srgb,
    var(--surface-input) 84%,
    var(--surface-page) 16%
  );
  --component-mix-status-info-fg-16pct-white-22pct: color-mix(
    in srgb,
    var(--status-info-fg) 16%,
    white 22%
  );
  --component-mix-session-focus-pulse-color-60pct-transparent: color-mix(
    in srgb,
    var(--session-focus-pulse-color) 60%,
    transparent
  );
  --component-mix-session-focus-pulse-color-0pct-transparent: color-mix(
    in srgb,
    var(--session-focus-pulse-color) 0%,
    transparent
  );
  --component-mix-session-focus-pulse-color-45pct-transparent: color-mix(
    in srgb,
    var(--session-focus-pulse-color) 45%,
    transparent
  );
  --component-mix-surface-panel-78pct-status-info-fg-22pct: color-mix(
    in srgb,
    var(--surface-panel) 78%,
    var(--status-info-fg) 22%
  );
  --component-mix-surface-panel-70pct-status-info-fg-30pct: color-mix(
    in srgb,
    var(--surface-panel) 70%,
    var(--status-info-fg) 30%
  );
  --component-mix-surface-panel-88pct-transparent-12pct: color-mix(
    in srgb,
    var(--surface-panel) 88%,
    transparent 12%
  );
  --component-mix-surface-panel-92pct-surface-hover-8pct: color-mix(
    in srgb,
    var(--surface-panel) 92%,
    var(--surface-hover) 8%
  );
  --component-mix-status-danger-fg-10pct-surface-panel: color-mix(
    in srgb,
    var(--status-danger-fg) 10%,
    var(--surface-panel)
  );
  --component-rgba-108-182-255-0-12: rgba(108, 182, 255, 0.12);
  --component-mix-surface-panel-24pct-transparent: color-mix(
    in srgb,
    var(--surface-panel) 24%,
    transparent
  );
  --component-mix-text-secondary-88pct-status-info-fg-12pct: color-mix(
    in srgb,
    var(--text-secondary) 88%,
    var(--status-info-fg) 12%
  );
  --component-mix-status-warning-fg-36pct-border-default: color-mix(
    in srgb,
    var(--status-warning-fg) 36%,
    var(--border-default)
  );
  --component-mix-status-warning-fg-12pct-surface-panel: color-mix(
    in srgb,
    var(--status-warning-fg) 12%,
    var(--surface-panel)
  );
  --component-mix-status-danger-fg-42pct-border-default: color-mix(
    in srgb,
    var(--status-danger-fg) 42%,
    var(--border-default)
  );
  --component-mix-surface-page-98pct-transparent: color-mix(
    in srgb,
    var(--surface-page) 98%,
    transparent
  );
  --component-mix-text-tertiary-24pct-transparent: color-mix(
    in srgb,
    var(--text-tertiary) 24%,
    transparent
  );
  --component-mix-border-default-86pct-transparent: color-mix(
    in srgb,
    var(--border-default) 86%,
    transparent
  );
  --component-mix-surface-panel-90pct-transparent: color-mix(
    in srgb,
    var(--surface-panel) 90%,
    transparent
  );
  --component-mix-status-info-fg-46pct-border-default: color-mix(
    in srgb,
    var(--status-info-fg) 46%,
    var(--border-default)
  );
  --component-mix-status-info-fg-34pct-border-default: color-mix(
    in srgb,
    var(--status-info-fg) 34%,
    var(--border-default)
  );
  --component-mix-border-default-74pct-transparent: color-mix(
    in srgb,
    var(--border-default) 74%,
    transparent
  );
  --component-mix-status-info-fg-6pct-surface-page-94pct: color-mix(
    in srgb,
    var(--status-info-fg) 6%,
    var(--surface-page) 94%
  );
  --component-mix-surface-page-98pct-surface-panel-2pct: color-mix(
    in srgb,
    var(--surface-page) 98%,
    var(--surface-panel) 2%
  );
  --component-mix-text-tertiary-88pct-surface-panel: color-mix(
    in srgb,
    var(--text-tertiary) 88%,
    var(--surface-panel)
  );
  --component-mix-surface-panel-96pct-transparent: color-mix(
    in srgb,
    var(--surface-panel) 96%,
    transparent
  );
  --component-mix-fg-white-8pct-transparent: color-mix(in srgb, var(--fg-white) 8%, transparent);
  --component-mix-surface-page-42pct-transparent: color-mix(
    in srgb,
    var(--surface-page) 42%,
    transparent
  );
  --component-mix-surface-panel-96pct-surface-page: color-mix(
    in srgb,
    var(--surface-panel) 96%,
    var(--surface-page)
  );
  --component-mix-fg-white-6pct-transparent: color-mix(in srgb, var(--fg-white) 6%, transparent);
  --component-mix-status-info-fg-52pct-transparent: color-mix(
    in srgb,
    var(--status-info-fg) 52%,
    transparent
  );
  --component-mix-status-info-fg-86pct-surface-panel: color-mix(
    in srgb,
    var(--status-info-fg) 86%,
    var(--surface-panel)
  );
  --component-mix-surface-page-0pct-transparent: color-mix(
    in srgb,
    var(--surface-page) 0%,
    transparent
  );
  --component-mix-border-default-80pct-transparent: color-mix(
    in srgb,
    var(--border-default) 80%,
    transparent
  );
  --component-mix-surface-panel-88pct-surface-page: color-mix(
    in srgb,
    var(--surface-panel) 88%,
    var(--surface-page)
  );
  --component-mix-fg-white-5pct-transparent: color-mix(in srgb, var(--fg-white) 5%, transparent);
  --component-mix-surface-page-20pct-transparent: color-mix(
    in srgb,
    var(--surface-page) 20%,
    transparent
  );
  --component-mix-text-secondary-86pct-status-info-fg-14pct: color-mix(
    in srgb,
    var(--text-secondary) 86%,
    var(--status-info-fg) 14%
  );
  --component-mix-fg-white-4pct-transparent: color-mix(in srgb, var(--fg-white) 4%, transparent);
  --component-mix-status-info-fg-30pct-border-default: color-mix(
    in srgb,
    var(--status-info-fg) 30%,
    var(--border-default)
  );
  --component-mix-border-default-72pct-transparent: color-mix(
    in srgb,
    var(--border-default) 72%,
    transparent
  );
  --component-mix-surface-page-76pct-surface-panel-24pct: color-mix(
    in srgb,
    var(--surface-page) 76%,
    var(--surface-panel) 24%
  );
  --component-mix-surface-page-92pct-surface-panel-8pct: color-mix(
    in srgb,
    var(--surface-page) 92%,
    var(--surface-panel) 8%
  );
  --component-mix-surface-page-18pct-transparent: color-mix(
    in srgb,
    var(--surface-page) 18%,
    transparent
  );
  --component-mix-status-info-fg-12pct-surface-page: color-mix(
    in srgb,
    var(--status-info-fg) 12%,
    var(--surface-page)
  );
  --component-mix-surface-input-96pct-surface-page: color-mix(
    in srgb,
    var(--surface-input) 96%,
    var(--surface-page)
  );
  --component-mix-border-default-66pct-transparent: color-mix(
    in srgb,
    var(--border-default) 66%,
    transparent
  );
  --component-mix-border-default-62pct-status-info-fg-38pct: color-mix(
    in srgb,
    var(--border-default) 62%,
    var(--status-info-fg) 38%
  );
  --component-mix-border-default-54pct-transparent: color-mix(
    in srgb,
    var(--border-default) 54%,
    transparent
  );
  --component-mix-surface-panel-64pct-status-info-fg-12pct: color-mix(
    in srgb,
    var(--surface-panel) 64%,
    var(--status-info-fg) 12%
  );
  --component-mix-status-info-fg-76pct-transparent: color-mix(
    in srgb,
    var(--status-info-fg) 76%,
    transparent
  );
  --component-mix-status-info-fg-14pct-transparent: color-mix(
    in srgb,
    var(--status-info-fg) 14%,
    transparent
  );
  --component-mix-surface-panel-78pct-surface-page: color-mix(
    in srgb,
    var(--surface-panel) 78%,
    var(--surface-page)
  );
  --component-mix-surface-hover-84pct-transparent: color-mix(
    in srgb,
    var(--surface-hover) 84%,
    transparent
  );
  --component-mix-surface-panel-88pct-transparent: color-mix(
    in srgb,
    var(--surface-panel) 88%,
    transparent
  );
  --component-mix-surface-page-16pct-transparent: color-mix(
    in srgb,
    var(--surface-page) 16%,
    transparent
  );
  --component-mix-status-info-fg-10pct-surface-page: color-mix(
    in srgb,
    var(--status-info-fg) 10%,
    var(--surface-page)
  );
  --component-mix-surface-panel-92pct-surface-elevated: color-mix(
    in srgb,
    var(--surface-panel) 92%,
    var(--surface-elevated)
  );
  --component-mix-status-info-fg-12pct-transparent: color-mix(
    in srgb,
    var(--status-info-fg) 12%,
    transparent
  );
  --component-mix-status-info-fg-8pct-transparent: color-mix(
    in srgb,
    var(--status-info-fg) 8%,
    transparent
  );
  --component-mix-status-danger-fg-82pct-text-primary: color-mix(
    in srgb,
    var(--status-danger-fg) 82%,
    var(--text-primary)
  );
  --component-mix-surface-panel-76pct-transparent: color-mix(
    in srgb,
    var(--surface-panel) 76%,
    transparent
  );
  --component-mix-status-danger-fg-8pct-transparent: color-mix(
    in srgb,
    var(--status-danger-fg) 8%,
    transparent
  );
  --component-mix-status-info-fg-26pct-transparent: color-mix(
    in srgb,
    var(--status-info-fg) 26%,
    transparent
  );
  --component-mix-surface-panel-80pct-transparent: color-mix(
    in srgb,
    var(--surface-panel) 80%,
    transparent
  );
  --component-mix-surface-hover-82pct-transparent: color-mix(
    in srgb,
    var(--surface-hover) 82%,
    transparent
  );
  --component-mix-status-info-fg-10pct-transparent: color-mix(
    in srgb,
    var(--status-info-fg) 10%,
    transparent
  );
  --component-mix-surface-page-95pct-surface-panel-5pct: color-mix(
    in srgb,
    var(--surface-page) 95%,
    var(--surface-panel) 5%
  );
  --component-mix-surface-panel-96pct-surface-page-4pct: color-mix(
    in srgb,
    var(--surface-panel) 96%,
    var(--surface-page) 4%
  );
  --component-mix-surface-panel-90pct-status-info-fg-10pct: color-mix(
    in srgb,
    var(--surface-panel) 90%,
    var(--status-info-fg) 10%
  );
  --component-mix-border-default-36pct-transparent: color-mix(
    in srgb,
    var(--border-default) 36%,
    transparent
  );
  --component-mix-icon-surface-subtle-82pct-surface-panel: color-mix(
    in srgb,
    var(--icon-surface-subtle) 82%,
    var(--surface-panel)
  );
  --component-mix-status-info-fg-35pct-transparent: color-mix(
    in srgb,
    var(--status-info-fg) 35%,
    transparent
  );
  --component-mix-status-info-fg-70pct-transparent: color-mix(
    in srgb,
    var(--status-info-fg) 70%,
    transparent
  );
  --component-mix-surface-panel-90pct-surface-page: color-mix(
    in srgb,
    var(--surface-panel) 90%,
    var(--surface-page)
  );
  --component-mix-surface-hover-92pct-transparent: color-mix(
    in srgb,
    var(--surface-hover) 92%,
    transparent
  );
  --component-mix-status-info-fg-44pct-transparent: color-mix(
    in srgb,
    var(--status-info-fg) 44%,
    transparent
  );
  --component-mix-surface-hover-88pct-transparent: color-mix(
    in srgb,
    var(--surface-hover) 88%,
    transparent
  );
  --component-mix-state-selected-bg-76pct-transparent: color-mix(
    in srgb,
    var(--state-selected-bg) 76%,
    transparent
  );
  --component-mix-surface-hover-90pct-transparent: color-mix(
    in srgb,
    var(--surface-hover) 90%,
    transparent
  );
  --component-mix-status-success-fg-78pct-white-22pct: color-mix(
    in srgb,
    var(--status-success-fg) 78%,
    white 22%
  );
  --component-mix-status-warning-fg-88pct-white-12pct: color-mix(
    in srgb,
    var(--status-warning-fg) 88%,
    white 12%
  );
  --component-mix-status-info-fg-80pct-white-20pct: color-mix(
    in srgb,
    var(--status-info-fg) 80%,
    white 20%
  );
  --component-hex-0b1020: #0b1020;
  --component-mix-status-info-fg-90pct-white-10pct: color-mix(
    in srgb,
    var(--status-info-fg) 90%,
    white 10%
  );
  --component-mix-status-success-fg-88pct-white-12pct: color-mix(
    in srgb,
    var(--status-success-fg) 88%,
    white 12%
  );
  --component-mix-status-danger-fg-82pct-white-18pct: color-mix(
    in srgb,
    var(--status-danger-fg) 82%,
    white 18%
  );
  --component-hex-b8a6e0: #b8a6e0;
  --component-hex-8a8a93: #8a8a93;
  --component-mix-text-tertiary-88pct-transparent: color-mix(
    in srgb,
    var(--text-tertiary) 88%,
    transparent
  );
  --component-mix-status-info-fg-74pct-transparent: color-mix(
    in srgb,
    var(--status-info-fg) 74%,
    transparent
  );
  --component-mix-status-info-fg-20pct-transparent: color-mix(
    in srgb,
    var(--status-info-fg) 20%,
    transparent
  );
  --component-mix-surface-panel-50pct-surface-page-50pct: color-mix(
    in srgb,
    var(--surface-panel) 50%,
    var(--surface-page) 50%
  );
  --component-mix-status-info-fg-85pct-white: color-mix(in srgb, var(--status-info-fg) 85%, white);
  --component-mix-border-focus-84pct-transparent: color-mix(
    in srgb,
    var(--border-focus) 84%,
    transparent
  );
  --component-mix-border-focus-76pct-transparent: color-mix(
    in srgb,
    var(--border-focus) 76%,
    transparent
  );
  /* ========== End Derived Component Visual Tokens ========== */

  /* Foundation compatibility */
  --state-focus-ring-color: #6cb6ff;
  --state-focus-ring-offset: 2px;
  --state-focus-ring-width: 2px;
  --state-hover-bg: var(--surface-hover);
  --state-hover-border: var(--border-subtle);
  --state-hover-text: var(--text-primary);
  --state-active-bg: var(--surface-active);
  --state-selected-bg: color-mix(in srgb, var(--status-info-fg) 20%, var(--surface-page));
  --state-selected-border: color-mix(in srgb, var(--status-info-fg) 52%, var(--border-default));
  --state-selected-text: var(--text-primary);
  --state-disabled-bg: var(--surface-disabled);
  --state-disabled-border: var(--border-default);
  --state-disabled-text: var(--text-disabled);
  --state-success-bg: var(--status-success-bg);
  --state-success-border: var(--status-success-border);
  --state-success-text: var(--status-success-fg);
  --state-success-icon: var(--status-success-icon);
  --state-warning-bg: var(--status-warning-bg);
  --state-warning-border: var(--status-warning-border);
  --state-warning-text: var(--status-warning-fg);
  --state-warning-icon: var(--status-warning-icon);
  --state-error-bg: var(--status-danger-bg);
  --state-error-border: var(--status-danger-border);
  --state-error-text: var(--status-danger-fg);
  --state-error-icon: var(--status-danger-icon);
  --state-info-bg: var(--status-info-bg);
  --state-info-border: var(--status-info-border);
  --state-info-text: var(--status-info-fg);
  --state-info-icon: var(--status-info-icon);

  --surface-canvas: var(--surface-page);
  --surface-panel-border: var(--border-default);
  --surface-elevated-border: var(--border-subtle);
  --surface-input-border: var(--border-default);
  --surface-inverse: var(--text-primary);
  --overlay-backdrop: color-mix(in srgb, var(--surface-page) 68%, transparent);
  --overlay-scrim: color-mix(in srgb, var(--surface-page) 82%, transparent);
  --overlay-panel: var(--surface-elevated);
  --overlay-panel-border: var(--border-subtle);
  --overlay-local-backdrop: color-mix(in srgb, var(--surface-page) 54%, transparent);
  --overlay-local-panel: var(--surface-panel);
  --overlay-local-panel-border: var(--border-default);
  --surface-page-bg: var(--surface-page);
  --surface-panel-bg: var(--surface-panel);
  --surface-elevated-bg: var(--surface-elevated);
  --surface-overlay-bg: color-mix(in srgb, #131b22 96%, transparent);
  --surface-overlay-border: var(--border-default);
  --surface-overlay-shadow: var(--shadow-lg);
  --surface-overlay-backdrop: color-mix(in srgb, var(--surface-page) 72%, black 28%);
  --surface-sticky-bg: color-mix(in srgb, var(--surface-page) 96%, var(--surface-panel) 4%);
  --overlay-width-sm: 360px;
  --overlay-width-md: 480px;
  --overlay-width-lg: 680px;
  --overlay-backdrop-opacity: 0.48;

  --ws-backdrop-filter: var(--material-backdrop-filter);
  --ws-content-bg: var(--workspace-content-surface);
  --ws-level-0: transparent;
  --ws-level-1: color-mix(
    in srgb,
    var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 40%),
    transparent
  );
  --ws-level-2: color-mix(
    in srgb,
    var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 56%),
    transparent
  );
  --ws-level-3: color-mix(
    in srgb,
    var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 72%),
    transparent
  );
  --ws-level-4: color-mix(
    in srgb,
    var(--surface-overlay-bg) calc(var(--app-surface-opacity, 0.96) * 88%),
    transparent
  );
  /* Existing compatibility tokens */
  --diff-removed-bg: var(--status-danger-bg);
  --diff-removed-border: var(--status-danger-border);
  --diff-add-bg: var(--diff-added-bg);
  --diff-modify-bg: var(--diff-modified-bg);
  --diff-delete-bg: var(--diff-deleted-bg);
  --text-muted: var(--text-tertiary);
  --accent-purple: #c792ea;
}

[data-theme="mint-light"] {
  --ref-fg-0: #1f2328;
  --ref-fg-1: #557067;
  --ref-fg-2: #8b949e;
  --ref-fg-3: #6e7681;
  --ref-fg-inverse: #ffffff;
  --ref-bg-0: #f3fbf7;
  --ref-bg-1: #fcfffd;
  --ref-bg-2: #edf7f2;
  --ref-bg-3: #f0f3f6;
  --ref-bg-4: #ddefe5;
  --ref-bg-5: #d1e8dc;
  --ref-bg-6: #c7d8cf;
  --ref-border-0: #c7d8cf;
  --ref-border-1: #d8e7df;
  --ref-border-2: #b8ccc1;
  --ref-border-focus: #158f77;
  --ref-border-danger: #cf222e;
  --ref-status-success: #1a7f37;
  --ref-status-warning: #9a6700;
  --ref-status-danger: #cf222e;
  --ref-status-info: #148a7a;

  --surface-panel: color-mix(in srgb, var(--ref-bg-1) 92%, var(--ref-bg-2));
  --surface-elevated: color-mix(in srgb, var(--ref-bg-1) 96%, white 4%);
  --status-success-bg: color-mix(in srgb, var(--ref-status-success) 14%, var(--surface-page));
  --status-success-border: color-mix(in srgb, var(--ref-status-success) 36%, var(--border-default));
  --status-warning-bg: color-mix(in srgb, var(--ref-status-warning) 14%, var(--surface-page));
  --status-warning-border: color-mix(in srgb, var(--ref-status-warning) 36%, var(--border-default));
  --status-danger-bg: color-mix(in srgb, var(--ref-status-danger) 14%, var(--surface-page));
  --status-danger-border: color-mix(in srgb, var(--ref-status-danger) 36%, var(--border-default));
  --status-info-bg: color-mix(in srgb, var(--ref-status-info) 14%, var(--surface-page));
  --status-info-border: color-mix(in srgb, var(--ref-status-info) 36%, var(--border-default));

  --state-focus-ring-color: #158f77;
  --state-selected-bg: color-mix(in srgb, var(--status-info-fg) 16%, var(--surface-page));
  --state-selected-border: color-mix(in srgb, var(--status-info-fg) 42%, var(--border-default));
  --surface-inverse: var(--text-inverse);
  --overlay-backdrop: color-mix(in srgb, #0f172a 26%, transparent);
  --overlay-scrim: color-mix(in srgb, #0f172a 40%, transparent);
  --overlay-local-backdrop: color-mix(in srgb, #0f172a 18%, transparent);
  --surface-overlay-bg: color-mix(in srgb, #ffffff 96%, transparent);
  --surface-overlay-backdrop: color-mix(in srgb, #0f172a 26%, transparent);

  --icon-accent: #148a7a;
  --icon-file-folder: #1f9d7f;
  --icon-file-code: #1373a5;
  --icon-file-data: var(--accent-purple);
  --icon-file-doc: #567065;
  --icon-file-media: #c65f80;
  --icon-surface-subtle: color-mix(in srgb, var(--text-secondary) 16%, var(--surface-panel));
  --icon-surface-accent: color-mix(in srgb, var(--icon-accent) 18%, var(--surface-panel));
  --icon-surface-success: color-mix(in srgb, var(--status-success-fg) 18%, var(--surface-panel));
  --icon-surface-warning: color-mix(in srgb, var(--status-warning-fg) 18%, var(--surface-panel));
  --icon-surface-error: color-mix(in srgb, var(--status-danger-fg) 18%, var(--surface-panel));
  --icon-surface-info: color-mix(in srgb, var(--status-info-fg) 18%, var(--surface-panel));

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);
  --shadow-glow: 0 0 12px rgba(21, 143, 119, 0.18);

  --accent-purple: #8250df;
}

[data-theme="graphite-dark"] {
  --ref-fg-0: #e6e6e6;
  --ref-fg-1: #a8b0ba;
  --ref-fg-2: #7d8590;
  --ref-fg-3: #5d6672;
  --ref-fg-inverse: #111317;
  --ref-bg-0: #0d1014;
  --ref-bg-1: #14171c;
  --ref-bg-2: #101318;
  --ref-bg-3: #161a20;
  --ref-bg-4: #1c2026;
  --ref-bg-5: #252b33;
  --ref-bg-6: #313842;
  --ref-border-0: #2a3038;
  --ref-border-1: #353c46;
  --ref-border-2: #434c55;
  --ref-border-focus: #9bb8ff;
  --ref-border-danger: #ffa198;
  --ref-status-success: #8ddb8c;
  --ref-status-warning: #dcb86a;
  --ref-status-danger: #ff7b72;
  --ref-status-info: #7aa2f7;

  --state-focus-ring-color: #9bb8ff;
  --surface-overlay-bg: color-mix(in srgb, #1a1f27 96%, transparent);

  --icon-accent: #8fb1ff;
  --icon-file-folder: #e1b86b;
  --icon-file-doc: #c5ccd6;
  --icon-file-media: #ff9f99;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.42);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.54);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.64);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.74);
  --shadow-glow: 0 0 12px rgba(122, 162, 247, 0.24);

  --accent-purple: #c099ff;
}

[data-theme="graphite-light"] {
  --ref-fg-0: #1f2933;
  --ref-fg-1: #4d5b6a;
  --ref-fg-2: #7b8794;
  --ref-fg-3: #9aa5b1;
  --ref-fg-inverse: #ffffff;
  --ref-bg-0: #e7edf3;
  --ref-bg-1: #ffffff;
  --ref-bg-2: #dfe6ee;
  --ref-bg-3: #eef2f6;
  --ref-bg-4: #d4dce5;
  --ref-bg-5: #c8d1dc;
  --ref-bg-6: #b8c3cf;
  --ref-border-0: #b8c3cf;
  --ref-border-1: #ccd5de;
  --ref-border-2: #aab7c6;
  --ref-border-focus: #315fdd;
  --ref-border-danger: #d14343;
  --ref-status-success: #15803d;
  --ref-status-warning: #a16207;
  --ref-status-danger: #d14343;
  --ref-status-info: #315fdd;

  --surface-panel: color-mix(in srgb, var(--ref-bg-1) 92%, var(--ref-bg-2));
  --surface-elevated: color-mix(in srgb, var(--ref-bg-1) 96%, white 4%);
  --status-success-bg: color-mix(in srgb, var(--ref-status-success) 14%, var(--surface-page));
  --status-success-border: color-mix(in srgb, var(--ref-status-success) 36%, var(--border-default));
  --status-warning-bg: color-mix(in srgb, var(--ref-status-warning) 14%, var(--surface-page));
  --status-warning-border: color-mix(in srgb, var(--ref-status-warning) 36%, var(--border-default));
  --status-danger-bg: color-mix(in srgb, var(--ref-status-danger) 14%, var(--surface-page));
  --status-danger-border: color-mix(in srgb, var(--ref-status-danger) 36%, var(--border-default));
  --status-info-bg: color-mix(in srgb, var(--ref-status-info) 14%, var(--surface-page));
  --status-info-border: color-mix(in srgb, var(--ref-status-info) 36%, var(--border-default));

  --state-focus-ring-color: #315fdd;
  --state-selected-bg: color-mix(in srgb, var(--status-info-fg) 16%, var(--surface-page));
  --state-selected-border: color-mix(in srgb, var(--status-info-fg) 42%, var(--border-default));
  --surface-inverse: var(--text-inverse);
  --overlay-backdrop: color-mix(in srgb, #0f172a 26%, transparent);
  --overlay-scrim: color-mix(in srgb, #0f172a 40%, transparent);
  --overlay-local-backdrop: color-mix(in srgb, #0f172a 18%, transparent);
  --surface-overlay-bg: color-mix(in srgb, #ffffff 96%, transparent);
  --surface-overlay-backdrop: color-mix(in srgb, #0f172a 26%, transparent);

  --icon-accent: #2f4fb8;
  --icon-file-folder: #8a6324;
  --icon-file-doc: #516171;
  --icon-file-media: #bf5a5a;
  --icon-surface-subtle: color-mix(in srgb, var(--text-secondary) 16%, var(--surface-panel));
  --icon-surface-accent: color-mix(in srgb, var(--icon-accent) 18%, var(--surface-panel));
  --icon-surface-success: color-mix(in srgb, var(--status-success-fg) 18%, var(--surface-panel));
  --icon-surface-warning: color-mix(in srgb, var(--status-warning-fg) 18%, var(--surface-panel));
  --icon-surface-error: color-mix(in srgb, var(--status-danger-fg) 18%, var(--surface-panel));
  --icon-surface-info: color-mix(in srgb, var(--status-info-fg) 18%, var(--surface-panel));

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.16);
  --shadow-glow: 0 0 12px rgba(49, 95, 221, 0.16);

  --accent-purple: #7c3aed;
}

[data-theme="nord-dark"] {
  --ref-fg-0: #d8dee9;
  --ref-fg-1: #b5c1d2;
  --ref-fg-2: #7b88a1;
  --ref-fg-3: #616e88;
  --ref-fg-inverse: #2e3440;
  --ref-bg-0: #242933;
  --ref-bg-1: #2e3440;
  --ref-bg-2: #282e39;
  --ref-bg-3: #2b313c;
  --ref-bg-4: #384152;
  --ref-bg-5: #434c5e;
  --ref-bg-6: #4b5566;
  --ref-border-0: #4c566a;
  --ref-border-1: #616e88;
  --ref-border-2: #73809c;
  --ref-border-focus: #88c0d0;
  --ref-border-danger: #d08770;
  --ref-status-success: #a3be8c;
  --ref-status-warning: #ebcb8b;
  --ref-status-danger: #bf616a;
  --ref-status-info: #88c0d0;

  --state-focus-ring-color: #88c0d0;
  --surface-overlay-bg: color-mix(in srgb, #2e3440 96%, transparent);

  --icon-accent: #8fbcbb;
  --icon-file-folder: #d8b76e;
  --icon-file-doc: #c7d3e0;
  --icon-file-media: #cf8c95;
  --icon-surface-subtle: color-mix(in srgb, var(--text-secondary) 20%, var(--surface-panel));
  --icon-surface-accent: color-mix(in srgb, var(--icon-accent) 24%, var(--surface-panel));

  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.36);
  --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.46);
  --shadow-lg: 0 8px 32px rgba(17, 24, 39, 0.58);
  --shadow-xl: 0 16px 48px rgba(17, 24, 39, 0.68);
  --shadow-glow: 0 0 12px rgba(136, 192, 208, 0.26);

  --accent-purple: #b48ead;
}

[data-theme="nord-light"] {
  --ref-fg-0: #2e3440;
  --ref-fg-1: #4d5a6f;
  --ref-fg-2: #7b88a1;
  --ref-fg-3: #93a0b7;
  --ref-fg-inverse: #ffffff;
  --ref-bg-0: #e3ebf4;
  --ref-bg-1: #f1f5fa;
  --ref-bg-2: #dbe4ef;
  --ref-bg-3: #edf1f6;
  --ref-bg-4: #d2ddea;
  --ref-bg-5: #c8d4e2;
  --ref-bg-6: #b8c6d7;
  --ref-border-0: #b8c6d7;
  --ref-border-1: #cad5e2;
  --ref-border-2: #aab9cc;
  --ref-border-focus: #5b7fa8;
  --ref-border-danger: #bf616a;
  --ref-status-success: #4c7a5b;
  --ref-status-warning: #a77f2f;
  --ref-status-danger: #bf616a;
  --ref-status-info: #5b7fa8;

  --surface-panel: color-mix(in srgb, var(--ref-bg-1) 92%, var(--ref-bg-2));
  --surface-elevated: color-mix(in srgb, var(--ref-bg-1) 96%, white 4%);
  --status-success-bg: color-mix(in srgb, var(--ref-status-success) 14%, var(--surface-page));
  --status-success-border: color-mix(in srgb, var(--ref-status-success) 36%, var(--border-default));
  --status-warning-bg: color-mix(in srgb, var(--ref-status-warning) 14%, var(--surface-page));
  --status-warning-border: color-mix(in srgb, var(--ref-status-warning) 36%, var(--border-default));
  --status-danger-bg: color-mix(in srgb, var(--ref-status-danger) 14%, var(--surface-page));
  --status-danger-border: color-mix(in srgb, var(--ref-status-danger) 36%, var(--border-default));
  --status-info-bg: color-mix(in srgb, var(--ref-status-info) 14%, var(--surface-page));
  --status-info-border: color-mix(in srgb, var(--ref-status-info) 36%, var(--border-default));

  --state-focus-ring-color: #5b7fa8;
  --state-selected-bg: color-mix(in srgb, var(--status-info-fg) 16%, var(--surface-page));
  --state-selected-border: color-mix(in srgb, var(--status-info-fg) 42%, var(--border-default));
  --surface-inverse: var(--text-inverse);
  --overlay-backdrop: color-mix(in srgb, #243447 20%, transparent);
  --overlay-scrim: color-mix(in srgb, #243447 32%, transparent);
  --overlay-local-backdrop: color-mix(in srgb, #243447 14%, transparent);
  --surface-overlay-bg: color-mix(in srgb, #ffffff 96%, transparent);
  --surface-overlay-backdrop: color-mix(in srgb, #243447 20%, transparent);

  --icon-accent: #6b8fb9;
  --icon-file-folder: #b28a49;
  --icon-file-doc: #5d6c82;
  --icon-file-media: #b96f77;
  --icon-surface-subtle: color-mix(in srgb, var(--text-secondary) 16%, var(--surface-panel));
  --icon-surface-accent: color-mix(in srgb, var(--icon-accent) 18%, var(--surface-panel));
  --icon-surface-success: color-mix(in srgb, var(--status-success-fg) 18%, var(--surface-panel));
  --icon-surface-warning: color-mix(in srgb, var(--status-warning-fg) 18%, var(--surface-panel));
  --icon-surface-error: color-mix(in srgb, var(--status-danger-fg) 18%, var(--surface-panel));
  --icon-surface-info: color-mix(in srgb, var(--status-info-fg) 18%, var(--surface-panel));

  --shadow-sm: 0 1px 2px rgba(46, 52, 64, 0.08);
  --shadow-md: 0 4px 12px rgba(46, 52, 64, 0.1);
  --shadow-lg: 0 8px 32px rgba(46, 52, 64, 0.12);
  --shadow-xl: 0 16px 48px rgba(46, 52, 64, 0.15);
  --shadow-glow: 0 0 12px rgba(91, 127, 168, 0.18);

  --accent-purple: #8f5b9c;
}

[data-theme="hc-dark"] {
  --ref-fg-0: #ffffff;
  --ref-fg-1: #f0f0f0;
  --ref-fg-2: #d0d0d0;
  --ref-fg-3: #8f8f8f;
  --ref-fg-inverse: #000000;
  --ref-bg-0: #000000;
  --ref-bg-1: #000000;
  --ref-bg-2: #000000;
  --ref-bg-3: #0d0d0d;
  --ref-bg-4: #141414;
  --ref-bg-5: #264f78;
  --ref-bg-6: #101010;
  --ref-border-0: #ffffff;
  --ref-border-1: #ffff00;
  --ref-border-2: #ffff00;
  --ref-border-focus: #ffff00;
  --ref-border-danger: #ff4d4d;
  --ref-status-success: #00ff7f;
  --ref-status-warning: #ffff66;
  --ref-status-danger: #ff4d4d;
  --ref-status-info: #66b3ff;

  --surface-panel: color-mix(in srgb, var(--ref-bg-1) 92%, var(--ref-bg-6));
  --surface-elevated: color-mix(in srgb, var(--ref-bg-1) 98%, white 2%);
  --status-success-bg: color-mix(in srgb, var(--ref-status-success) 24%, var(--surface-page));
  --status-success-border: color-mix(in srgb, var(--ref-status-success) 56%, var(--border-default));
  --status-warning-bg: color-mix(in srgb, var(--ref-status-warning) 24%, var(--surface-page));
  --status-warning-border: color-mix(in srgb, var(--ref-status-warning) 56%, var(--border-default));
  --status-danger-bg: color-mix(in srgb, var(--ref-status-danger) 24%, var(--surface-page));
  --status-danger-border: color-mix(in srgb, var(--ref-status-danger) 56%, var(--border-default));
  --status-info-bg: color-mix(in srgb, var(--ref-status-info) 24%, var(--surface-page));
  --status-info-border: color-mix(in srgb, var(--ref-status-info) 56%, var(--border-default));

  --state-focus-ring-color: #ffff00;
  --state-selected-bg: color-mix(in srgb, var(--status-info-fg) 24%, var(--surface-page));
  --state-selected-border: color-mix(in srgb, var(--status-info-fg) 60%, var(--border-default));
  --surface-overlay-bg: color-mix(in srgb, #111111 96%, transparent);
  --surface-overlay-backdrop: color-mix(in srgb, #000000 72%, transparent);
  --overlay-backdrop: color-mix(in srgb, #000000 72%, transparent);
  --overlay-scrim: color-mix(in srgb, #000000 84%, transparent);
  --overlay-local-backdrop: color-mix(in srgb, #000000 58%, transparent);

  --icon-primary: #ffffff;
  --icon-secondary: #ffff00;
  --icon-muted: #d0d0d0;
  --icon-accent: #66b3ff;
  --icon-success: #00ff7f;
  --icon-warning: #ffff66;
  --icon-error: #ff4d4d;
  --icon-info: #66b3ff;
  --icon-file-folder: #ffff00;
  --icon-file-code: #66b3ff;
  --icon-file-data: #ff7fff;
  --icon-file-doc: #ffffff;
  --icon-file-media: #ff4d4d;
  --icon-file-default: #ffffff;
  --icon-git-staged: #00ff7f;
  --icon-git-modified: #ffff66;
  --icon-git-deleted: #ff4d4d;
  --icon-git-untracked: #66b3ff;
  --icon-surface-subtle: color-mix(in srgb, #ffffff 20%, var(--surface-panel));
  --icon-surface-accent: color-mix(in srgb, #66b3ff 28%, var(--surface-panel));
  --icon-surface-success: color-mix(in srgb, #00ff7f 28%, var(--surface-panel));
  --icon-surface-warning: color-mix(in srgb, #ffff66 28%, var(--surface-panel));
  --icon-surface-error: color-mix(in srgb, #ff4d4d 28%, var(--surface-panel));
  --icon-surface-info: color-mix(in srgb, #66b3ff 28%, var(--surface-panel));

  --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.55);
  --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.72);
  --shadow-lg: 0 0 0 2px rgba(255, 255, 255, 0.72);
  --shadow-xl: 0 0 0 3px rgba(255, 255, 255, 0.8);
  --shadow-glow: 0 0 0 2px rgba(255, 255, 0, 0.52);
  --scrollbar-thumb: #ffffff;

  --accent-purple: #ff7fff;
}

[data-theme="hc-light"] {
  --ref-fg-0: #000000;
  --ref-fg-1: #111111;
  --ref-fg-2: #333333;
  --ref-fg-3: #5c5c5c;
  --ref-fg-inverse: #ffffff;
  --ref-bg-0: #ffffff;
  --ref-bg-1: #ffffff;
  --ref-bg-2: #ffffff;
  --ref-bg-3: #f3f3f3;
  --ref-bg-4: #eef4ff;
  --ref-bg-5: #add6ff;
  --ref-bg-6: #f0f0f0;
  --ref-border-0: #000000;
  --ref-border-1: #5c5c5c;
  --ref-border-2: #5c5c5c;
  --ref-border-focus: #0037da;
  --ref-border-danger: #b00020;
  --ref-status-success: #006b3c;
  --ref-status-warning: #7a5c00;
  --ref-status-danger: #b00020;
  --ref-status-info: #0037da;

  --surface-panel: color-mix(in srgb, var(--ref-bg-1) 92%, var(--ref-bg-6));
  --surface-elevated: color-mix(in srgb, var(--ref-bg-1) 96%, white 4%);
  --status-success-bg: color-mix(in srgb, var(--ref-status-success) 16%, var(--surface-page));
  --status-success-border: color-mix(in srgb, var(--ref-status-success) 38%, var(--border-default));
  --status-warning-bg: color-mix(in srgb, var(--ref-status-warning) 16%, var(--surface-page));
  --status-warning-border: color-mix(in srgb, var(--ref-status-warning) 38%, var(--border-default));
  --status-danger-bg: color-mix(in srgb, var(--ref-status-danger) 16%, var(--surface-page));
  --status-danger-border: color-mix(in srgb, var(--ref-status-danger) 38%, var(--border-default));
  --status-info-bg: color-mix(in srgb, var(--ref-status-info) 16%, var(--surface-page));
  --status-info-border: color-mix(in srgb, var(--ref-status-info) 38%, var(--border-default));

  --state-focus-ring-color: #0037da;
  --state-selected-bg: color-mix(in srgb, var(--status-info-fg) 18%, var(--surface-page));
  --state-selected-border: color-mix(in srgb, var(--status-info-fg) 44%, var(--border-default));
  --surface-inverse: var(--text-inverse);
  --surface-overlay-bg: color-mix(in srgb, #ffffff 96%, transparent);
  --surface-overlay-backdrop: color-mix(in srgb, #000000 20%, transparent);
  --overlay-backdrop: color-mix(in srgb, #000000 20%, transparent);
  --overlay-scrim: color-mix(in srgb, #000000 30%, transparent);
  --overlay-local-backdrop: color-mix(in srgb, #000000 14%, transparent);

  --icon-primary: #000000;
  --icon-secondary: #111111;
  --icon-muted: #333333;
  --icon-accent: #0037da;
  --icon-success: #006b3c;
  --icon-warning: #7a5c00;
  --icon-error: #b00020;
  --icon-info: #0037da;
  --icon-file-folder: #7a5c00;
  --icon-file-code: #0037da;
  --icon-file-data: #7a00cc;
  --icon-file-doc: #000000;
  --icon-file-media: #b00020;
  --icon-file-default: #111111;
  --icon-git-staged: #006b3c;
  --icon-git-modified: #7a5c00;
  --icon-git-deleted: #b00020;
  --icon-git-untracked: #0037da;
  --icon-surface-subtle: color-mix(in srgb, #000000 12%, var(--surface-panel));
  --icon-surface-accent: color-mix(in srgb, #0037da 18%, var(--surface-panel));
  --icon-surface-success: color-mix(in srgb, #006b3c 18%, var(--surface-panel));
  --icon-surface-warning: color-mix(in srgb, #7a5c00 18%, var(--surface-panel));
  --icon-surface-error: color-mix(in srgb, #b00020 18%, var(--surface-panel));
  --icon-surface-info: color-mix(in srgb, #0037da 18%, var(--surface-panel));

  --shadow-sm: 0 0 0 1px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 0 0 1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 0 0 2px rgba(0, 0, 0, 0.32);
  --shadow-xl: 0 0 0 3px rgba(0, 0, 0, 0.36);
  --shadow-glow: 0 0 0 2px rgba(0, 55, 218, 0.3);
  --scrollbar-thumb: #5c5c5c;

  --accent-purple: #7a00cc;
}

[data-theme="spring-dark"] {
  --ref-fg-0: #f0e1e7;
  --ref-fg-1: #c5aeb8;
  --ref-fg-2: #8f6f7b;
  --ref-fg-3: #6c505a;
  --ref-fg-inverse: #160f14;
  --ref-bg-0: #160f14;
  --ref-bg-1: #1d141a;
  --ref-bg-2: #191118;
  --ref-bg-3: #20151c;
  --ref-bg-4: #291923;
  --ref-bg-5: #3b1f2a;
  --ref-bg-6: #170f14;
  --ref-border-0: #43303a;
  --ref-border-1: #5a404c;
  --ref-border-2: #5a404c;
  --ref-border-focus: #d95f7e;
  --ref-border-danger: #f29ab0;
  --ref-status-success: #4ca773;
  --ref-status-warning: #d2a24f;
  --ref-status-danger: #de7f92;
  --ref-status-info: #6fa6d8;

  --state-focus-ring-color: #d95f7e;
  --state-selected-bg: color-mix(in srgb, #d95f7e 18%, var(--ref-bg-1));
  --state-selected-border: color-mix(in srgb, #d95f7e 46%, var(--border-default));
  --surface-overlay-bg: color-mix(in srgb, #21161c 96%, transparent);

  --icon-accent: #d95f7e;
  --icon-file-folder: #d98c96;
  --icon-file-code: #a78ce8;
  --icon-file-data: var(--accent-purple);
  --icon-file-doc: #e6d3da;
  --icon-file-media: #e991a9;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.42);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.54);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.64);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.74);
  --shadow-glow: 0 0 12px rgba(217, 95, 126, 0.26);
  --scrollbar-thumb: #5a404c;

  --accent-purple: #cf7eb3;
}

[data-theme="spring-light"] {
  --ref-fg-0: #35252b;
  --ref-fg-1: #7d5f69;
  --ref-fg-2: #a3848d;
  --ref-fg-3: #b79ea6;
  --ref-fg-inverse: #ffffff;
  --ref-bg-0: #fff2f5;
  --ref-bg-1: #fff9fa;
  --ref-bg-2: #fbecef;
  --ref-bg-3: #f7eef1;
  --ref-bg-4: #f5dde5;
  --ref-bg-5: #f0cfda;
  --ref-bg-6: #ffffff;
  --ref-border-0: #e3c4cf;
  --ref-border-1: #efd5dd;
  --ref-border-2: #e3c4cf;
  --ref-border-focus: #c84b6a;
  --ref-border-danger: #d96f86;
  --ref-status-success: #2f7a57;
  --ref-status-warning: #b7822e;
  --ref-status-danger: #cc6f82;
  --ref-status-info: #5f90c7;

  --surface-panel: color-mix(in srgb, var(--ref-bg-1) 92%, var(--ref-bg-2));
  --surface-elevated: color-mix(in srgb, var(--ref-bg-1) 96%, white 4%);
  --status-success-bg: color-mix(in srgb, var(--ref-status-success) 14%, var(--surface-page));
  --status-success-border: color-mix(in srgb, var(--ref-status-success) 36%, var(--border-default));
  --status-warning-bg: color-mix(in srgb, var(--ref-status-warning) 14%, var(--surface-page));
  --status-warning-border: color-mix(in srgb, var(--ref-status-warning) 36%, var(--border-default));
  --status-danger-bg: color-mix(in srgb, var(--ref-status-danger) 14%, var(--surface-page));
  --status-danger-border: color-mix(in srgb, var(--ref-status-danger) 36%, var(--border-default));
  --status-info-bg: color-mix(in srgb, var(--ref-status-info) 14%, var(--surface-page));
  --status-info-border: color-mix(in srgb, var(--ref-status-info) 36%, var(--border-default));

  --state-focus-ring-color: #c84b6a;
  --state-selected-bg: color-mix(in srgb, #c84b6a 14%, var(--ref-bg-1));
  --state-selected-border: color-mix(in srgb, #c84b6a 36%, var(--border-default));
  --surface-inverse: var(--text-inverse);
  --overlay-backdrop: color-mix(in srgb, #2f1520 18%, transparent);
  --overlay-scrim: color-mix(in srgb, #2f1520 30%, transparent);
  --overlay-local-backdrop: color-mix(in srgb, #2f1520 12%, transparent);
  --surface-overlay-bg: color-mix(in srgb, #fffafc 96%, transparent);
  --surface-overlay-backdrop: color-mix(in srgb, #2f1520 18%, transparent);

  --icon-accent: #c84b6a;
  --icon-file-folder: #c85d74;
  --icon-file-code: #8b6fcf;
  --icon-file-data: var(--accent-purple);
  --icon-file-doc: #8d6d76;
  --icon-file-media: #d67992;
  --icon-surface-subtle: color-mix(in srgb, var(--text-secondary) 16%, var(--surface-panel));
  --icon-surface-accent: color-mix(in srgb, var(--icon-accent) 18%, var(--surface-panel));
  --icon-surface-success: color-mix(in srgb, var(--status-success-fg) 18%, var(--surface-panel));
  --icon-surface-warning: color-mix(in srgb, var(--status-warning-fg) 18%, var(--surface-panel));
  --icon-surface-error: color-mix(in srgb, var(--status-danger-fg) 18%, var(--surface-panel));
  --icon-surface-info: color-mix(in srgb, var(--status-info-fg) 18%, var(--surface-panel));
  --shadow-sm: 0 1px 2px rgba(64, 28, 39, 0.08);
  --shadow-md: 0 4px 12px rgba(64, 28, 39, 0.1);
  --shadow-lg: 0 8px 32px rgba(64, 28, 39, 0.12);
  --shadow-xl: 0 16px 48px rgba(64, 28, 39, 0.16);
  --shadow-glow: 0 0 12px rgba(200, 75, 106, 0.18);
  --scrollbar-thumb: #e6c7d1;

  --accent-purple: #b85c9b;
}

[data-theme="summer-dark"] {
  --ref-fg-0: #dbe7df;
  --ref-fg-1: #a8bbb0;
  --ref-fg-2: #74887d;
  --ref-fg-3: #55665e;
  --ref-fg-inverse: #0f1513;
  --ref-bg-0: #0f1513;
  --ref-bg-1: #151d19;
  --ref-bg-2: #121915;
  --ref-bg-3: #18201c;
  --ref-bg-4: #1a2a22;
  --ref-bg-5: #22372c;
  --ref-bg-6: #101713;
  --ref-border-0: #30433a;
  --ref-border-1: #3e564b;
  --ref-border-2: #3e564b;
  --ref-border-focus: #4db57a;
  --ref-border-danger: #e08989;
  --ref-status-success: #53a878;
  --ref-status-warning: #c6a24c;
  --ref-status-danger: #d97b7b;
  --ref-status-info: #67a8c4;

  --state-focus-ring-color: #4db57a;
  --state-selected-bg: color-mix(in srgb, #4db57a 18%, var(--ref-bg-1));
  --state-selected-border: color-mix(in srgb, #4db57a 46%, var(--border-default));
  --surface-overlay-bg: color-mix(in srgb, #18211c 96%, transparent);

  --icon-accent: #4db57a;
  --icon-file-folder: #7fb886;
  --icon-file-code: #5fa38f;
  --icon-file-data: var(--accent-purple);
  --icon-file-doc: #c6d4cb;
  --icon-file-media: #c99182;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.52);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.62);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.72);
  --shadow-glow: 0 0 12px rgba(77, 181, 122, 0.24);
  --scrollbar-thumb: #3e564b;

  --accent-purple: #8d7ccf;
}

[data-theme="summer-light"] {
  --ref-fg-0: #23312a;
  --ref-fg-1: #51665d;
  --ref-fg-2: #8d9d95;
  --ref-fg-3: #9ead9f;
  --ref-fg-inverse: #ffffff;
  --ref-bg-0: #f2f8f3;
  --ref-bg-1: #fbfefb;
  --ref-bg-2: #e8f2ea;
  --ref-bg-3: #eef4ef;
  --ref-bg-4: #d9e9dc;
  --ref-bg-5: #ccdfd1;
  --ref-bg-6: #ffffff;
  --ref-border-0: #c5d8cb;
  --ref-border-1: #d7e5db;
  --ref-border-2: #c5d8cb;
  --ref-border-focus: #2f9560;
  --ref-border-danger: #d77e7e;
  --ref-status-success: #2f8757;
  --ref-status-warning: #ab8636;
  --ref-status-danger: #c96f6f;
  --ref-status-info: #5c98b3;

  --surface-panel: color-mix(in srgb, var(--ref-bg-1) 92%, var(--ref-bg-2));
  --surface-elevated: color-mix(in srgb, var(--ref-bg-1) 96%, white 4%);
  --status-success-bg: color-mix(in srgb, var(--ref-status-success) 14%, var(--surface-page));
  --status-success-border: color-mix(in srgb, var(--ref-status-success) 36%, var(--border-default));
  --status-warning-bg: color-mix(in srgb, var(--ref-status-warning) 14%, var(--surface-page));
  --status-warning-border: color-mix(in srgb, var(--ref-status-warning) 36%, var(--border-default));
  --status-danger-bg: color-mix(in srgb, var(--ref-status-danger) 14%, var(--surface-page));
  --status-danger-border: color-mix(in srgb, var(--ref-status-danger) 36%, var(--border-default));
  --status-info-bg: color-mix(in srgb, var(--ref-status-info) 14%, var(--surface-page));
  --status-info-border: color-mix(in srgb, var(--ref-status-info) 36%, var(--border-default));

  --state-focus-ring-color: #2f9560;
  --state-selected-bg: color-mix(in srgb, #2f9560 14%, var(--ref-bg-1));
  --state-selected-border: color-mix(in srgb, #2f9560 36%, var(--border-default));
  --surface-inverse: var(--text-inverse);
  --overlay-backdrop: color-mix(in srgb, #163221 18%, transparent);
  --overlay-scrim: color-mix(in srgb, #163221 28%, transparent);
  --overlay-local-backdrop: color-mix(in srgb, #163221 12%, transparent);
  --surface-overlay-bg: color-mix(in srgb, #fbfefc 96%, transparent);
  --surface-overlay-backdrop: color-mix(in srgb, #163221 18%, transparent);

  --icon-accent: #2f9560;
  --icon-file-folder: #429b63;
  --icon-file-code: #4f8f79;
  --icon-file-data: var(--accent-purple);
  --icon-file-doc: #677b72;
  --icon-file-media: #c37a70;
  --icon-surface-subtle: color-mix(in srgb, var(--text-secondary) 16%, var(--surface-panel));
  --icon-surface-accent: color-mix(in srgb, var(--icon-accent) 18%, var(--surface-panel));
  --icon-surface-success: color-mix(in srgb, var(--status-success-fg) 18%, var(--surface-panel));
  --icon-surface-warning: color-mix(in srgb, var(--status-warning-fg) 18%, var(--surface-panel));
  --icon-surface-error: color-mix(in srgb, var(--status-danger-fg) 18%, var(--surface-panel));
  --icon-surface-info: color-mix(in srgb, var(--status-info-fg) 18%, var(--surface-panel));
  --shadow-sm: 0 1px 2px rgba(20, 41, 29, 0.08);
  --shadow-md: 0 4px 12px rgba(20, 41, 29, 0.1);
  --shadow-lg: 0 8px 32px rgba(20, 41, 29, 0.12);
  --shadow-xl: 0 16px 48px rgba(20, 41, 29, 0.16);
  --shadow-glow: 0 0 12px rgba(47, 149, 96, 0.18);
  --scrollbar-thumb: #cfe0d4;

  --accent-purple: #7e73b2;
}

[data-theme="autumn-dark"] {
  --ref-fg-0: #eadfce;
  --ref-fg-1: #bcae99;
  --ref-fg-2: #8e7965;
  --ref-fg-3: #665545;
  --ref-fg-inverse: #14100d;
  --ref-bg-0: #14100d;
  --ref-bg-1: #1b1511;
  --ref-bg-2: #17120f;
  --ref-bg-3: #1e1813;
  --ref-bg-4: #2a2018;
  --ref-bg-5: #34261b;
  --ref-bg-6: #15100d;
  --ref-border-0: #48372a;
  --ref-border-1: #5f4938;
  --ref-border-2: #5f4938;
  --ref-border-focus: #c08a3c;
  --ref-border-danger: #dd8a72;
  --ref-status-success: #88905e;
  --ref-status-warning: #cb9541;
  --ref-status-danger: #cf7a62;
  --ref-status-info: #7d9bb0;

  --state-focus-ring-color: #c08a3c;
  --state-selected-bg: color-mix(in srgb, #c08a3c 18%, var(--ref-bg-1));
  --state-selected-border: color-mix(in srgb, #c08a3c 46%, var(--border-default));
  --surface-overlay-bg: color-mix(in srgb, #201913 96%, transparent);

  --icon-accent: #c08a3c;
  --icon-file-folder: #c0954d;
  --icon-file-code: #9b7c57;
  --icon-file-data: var(--accent-purple);
  --icon-file-doc: #d5c6b1;
  --icon-file-media: #cf8c6b;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.42);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.54);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.64);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.74);
  --shadow-glow: 0 0 12px rgba(192, 138, 60, 0.24);
  --scrollbar-thumb: #5f4938;

  --accent-purple: #a26e90;
}

[data-theme="autumn-light"] {
  --ref-fg-0: #3f3125;
  --ref-fg-1: #78624d;
  --ref-fg-2: #ab9988;
  --ref-fg-3: #baa998;
  --ref-fg-inverse: #ffffff;
  --ref-bg-0: #fbf6ee;
  --ref-bg-1: #fffaf3;
  --ref-bg-2: #f4ead9;
  --ref-bg-3: #f7f1e6;
  --ref-bg-4: #efe0c4;
  --ref-bg-5: #e7d2ae;
  --ref-bg-6: #ffffff;
  --ref-border-0: #dfc8a6;
  --ref-border-1: #eadac0;
  --ref-border-2: #dfc8a6;
  --ref-border-focus: #b7791f;
  --ref-border-danger: #cf7d62;
  --ref-status-success: #768254;
  --ref-status-warning: #b9822d;
  --ref-status-danger: #c16e56;
  --ref-status-info: #6f8fa3;

  --surface-panel: color-mix(in srgb, var(--ref-bg-1) 92%, var(--ref-bg-2));
  --surface-elevated: color-mix(in srgb, var(--ref-bg-1) 96%, white 4%);
  --status-success-bg: color-mix(in srgb, var(--ref-status-success) 14%, var(--surface-page));
  --status-success-border: color-mix(in srgb, var(--ref-status-success) 36%, var(--border-default));
  --status-warning-bg: color-mix(in srgb, var(--ref-status-warning) 14%, var(--surface-page));
  --status-warning-border: color-mix(in srgb, var(--ref-status-warning) 36%, var(--border-default));
  --status-danger-bg: color-mix(in srgb, var(--ref-status-danger) 14%, var(--surface-page));
  --status-danger-border: color-mix(in srgb, var(--ref-status-danger) 36%, var(--border-default));
  --status-info-bg: color-mix(in srgb, var(--ref-status-info) 14%, var(--surface-page));
  --status-info-border: color-mix(in srgb, var(--ref-status-info) 36%, var(--border-default));

  --state-focus-ring-color: #b7791f;
  --state-selected-bg: color-mix(in srgb, #b7791f 14%, var(--ref-bg-1));
  --state-selected-border: color-mix(in srgb, #b7791f 36%, var(--border-default));
  --surface-inverse: var(--text-inverse);
  --overlay-backdrop: color-mix(in srgb, #3a2918 18%, transparent);
  --overlay-scrim: color-mix(in srgb, #3a2918 28%, transparent);
  --overlay-local-backdrop: color-mix(in srgb, #3a2918 12%, transparent);
  --surface-overlay-bg: color-mix(in srgb, #fffbf5 96%, transparent);
  --surface-overlay-backdrop: color-mix(in srgb, #3a2918 18%, transparent);

  --icon-accent: #b7791f;
  --icon-file-folder: #b77c32;
  --icon-file-code: #8c6b49;
  --icon-file-data: var(--accent-purple);
  --icon-file-doc: #87715e;
  --icon-file-media: #c77b61;
  --icon-surface-subtle: color-mix(in srgb, var(--text-secondary) 16%, var(--surface-panel));
  --icon-surface-accent: color-mix(in srgb, var(--icon-accent) 18%, var(--surface-panel));
  --icon-surface-success: color-mix(in srgb, var(--status-success-fg) 18%, var(--surface-panel));
  --icon-surface-warning: color-mix(in srgb, var(--status-warning-fg) 18%, var(--surface-panel));
  --icon-surface-error: color-mix(in srgb, var(--status-danger-fg) 18%, var(--surface-panel));
  --icon-surface-info: color-mix(in srgb, var(--status-info-fg) 18%, var(--surface-panel));
  --shadow-sm: 0 1px 2px rgba(52, 38, 24, 0.08);
  --shadow-md: 0 4px 12px rgba(52, 38, 24, 0.1);
  --shadow-lg: 0 8px 32px rgba(52, 38, 24, 0.12);
  --shadow-xl: 0 16px 48px rgba(52, 38, 24, 0.16);
  --shadow-glow: 0 0 12px rgba(183, 121, 31, 0.18);
  --scrollbar-thumb: #e1d1b8;

  --accent-purple: #9a5f80;
}

[data-theme="winter-dark"] {
  --ref-fg-0: #d8e1ec;
  --ref-fg-1: #a6b3c2;
  --ref-fg-2: #7b8b9d;
  --ref-fg-3: #5c6a79;
  --ref-fg-inverse: #0d1218;
  --ref-bg-0: #0d1218;
  --ref-bg-1: #131a22;
  --ref-bg-2: #10161d;
  --ref-bg-3: #151b23;
  --ref-bg-4: #19232e;
  --ref-bg-5: #1f2d3b;
  --ref-bg-6: #0e141a;
  --ref-border-0: #334150;
  --ref-border-1: #415265;
  --ref-border-2: #415265;
  --ref-border-focus: #8aa4c8;
  --ref-border-danger: #d18d98;
  --ref-status-success: #7fa2a0;
  --ref-status-warning: #c4aa6f;
  --ref-status-danger: #cb8691;
  --ref-status-info: #86a7cf;

  --state-focus-ring-color: #8aa4c8;
  --state-selected-bg: color-mix(in srgb, #8aa4c8 18%, var(--ref-bg-1));
  --state-selected-border: color-mix(in srgb, #8aa4c8 46%, var(--border-default));
  --surface-overlay-bg: color-mix(in srgb, #161e27 96%, transparent);

  --icon-accent: #8aa4c8;
  --icon-file-folder: #94aac1;
  --icon-file-code: #8aa4c8;
  --icon-file-data: var(--accent-purple);
  --icon-file-doc: #c9d3df;
  --icon-file-media: #c697a3;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.42);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.54);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.64);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.74);
  --shadow-glow: 0 0 12px rgba(138, 164, 200, 0.22);
  --scrollbar-thumb: #415265;

  --accent-purple: #9a8cc0;
}

[data-theme="winter-light"] {
  --ref-fg-0: #273241;
  --ref-fg-1: #566578;
  --ref-fg-2: #95a3b3;
  --ref-fg-3: #a7b3c1;
  --ref-fg-inverse: #ffffff;
  --ref-bg-0: #eff4fa;
  --ref-bg-1: #f8fbfe;
  --ref-bg-2: #e7edf5;
  --ref-bg-3: #f1f5f9;
  --ref-bg-4: #dfe7f0;
  --ref-bg-5: #d3deea;
  --ref-bg-6: #ffffff;
  --ref-border-0: #c9d5e1;
  --ref-border-1: #dbe4ec;
  --ref-border-2: #c9d5e1;
  --ref-border-focus: #6f89ad;
  --ref-border-danger: #c7828c;
  --ref-status-success: #688c8d;
  --ref-status-warning: #af985f;
  --ref-status-danger: #bf7883;
  --ref-status-info: #7899bd;

  --surface-panel: color-mix(in srgb, var(--ref-bg-1) 92%, var(--ref-bg-2));
  --surface-elevated: color-mix(in srgb, var(--ref-bg-1) 96%, white 4%);
  --status-success-bg: color-mix(in srgb, var(--ref-status-success) 14%, var(--surface-page));
  --status-success-border: color-mix(in srgb, var(--ref-status-success) 36%, var(--border-default));
  --status-warning-bg: color-mix(in srgb, var(--ref-status-warning) 14%, var(--surface-page));
  --status-warning-border: color-mix(in srgb, var(--ref-status-warning) 36%, var(--border-default));
  --status-danger-bg: color-mix(in srgb, var(--ref-status-danger) 14%, var(--surface-page));
  --status-danger-border: color-mix(in srgb, var(--ref-status-danger) 36%, var(--border-default));
  --status-info-bg: color-mix(in srgb, var(--ref-status-info) 14%, var(--surface-page));
  --status-info-border: color-mix(in srgb, var(--ref-status-info) 36%, var(--border-default));

  --state-focus-ring-color: #6f89ad;
  --state-selected-bg: color-mix(in srgb, #6f89ad 14%, var(--ref-bg-1));
  --state-selected-border: color-mix(in srgb, #6f89ad 36%, var(--border-default));
  --surface-inverse: var(--text-inverse);
  --overlay-backdrop: color-mix(in srgb, #1f3042 16%, transparent);
  --overlay-scrim: color-mix(in srgb, #1f3042 26%, transparent);
  --overlay-local-backdrop: color-mix(in srgb, #1f3042 10%, transparent);
  --surface-overlay-bg: color-mix(in srgb, #fbfdff 96%, transparent);
  --surface-overlay-backdrop: color-mix(in srgb, #1f3042 16%, transparent);

  --icon-accent: #6f89ad;
  --icon-file-folder: #8098b5;
  --icon-file-code: #6f89ad;
  --icon-file-data: var(--accent-purple);
  --icon-file-doc: #67788c;
  --icon-file-media: #b9858f;
  --icon-surface-subtle: color-mix(in srgb, var(--text-secondary) 16%, var(--surface-panel));
  --icon-surface-accent: color-mix(in srgb, var(--icon-accent) 18%, var(--surface-panel));
  --icon-surface-success: color-mix(in srgb, var(--status-success-fg) 18%, var(--surface-panel));
  --icon-surface-warning: color-mix(in srgb, var(--status-warning-fg) 18%, var(--surface-panel));
  --icon-surface-error: color-mix(in srgb, var(--status-danger-fg) 18%, var(--surface-panel));
  --icon-surface-info: color-mix(in srgb, var(--status-info-fg) 18%, var(--surface-panel));
  --shadow-sm: 0 1px 2px rgba(23, 36, 51, 0.08);
  --shadow-md: 0 4px 12px rgba(23, 36, 51, 0.1);
  --shadow-lg: 0 8px 32px rgba(23, 36, 51, 0.12);
  --shadow-xl: 0 16px 48px rgba(23, 36, 51, 0.16);
  --shadow-glow: 0 0 12px rgba(111, 137, 173, 0.16);
  --scrollbar-thumb: #d2dce7;

  --accent-purple: #8d7fa8;
}

:root[data-appearance-glass="on"] {
  --material-backdrop-filter: var(--app-surface-backdrop-filter, none);
  --material-panel: color-mix(
    in srgb,
    var(--surface-panel) calc(var(--app-surface-opacity, 0.96) * 100%),
    transparent
  );
  --material-elevated: color-mix(
    in srgb,
    var(--surface-elevated) calc(var(--app-surface-opacity, 0.92) * 100%),
    transparent
  );
  --material-overlay: color-mix(
    in srgb,
    var(--surface-elevated) calc(var(--app-surface-opacity, 0.88) * 100%),
    transparent
  );
  --material-local-overlay: color-mix(
    in srgb,
    var(--surface-panel) calc(var(--app-surface-opacity, 0.84) * 100%),
    transparent
  );
  --material-shell-page: color-mix(
    in srgb,
    var(--surface-page) calc(var(--app-surface-opacity, 0.96) * 100%),
    transparent
  );
  --material-shell-topbar: color-mix(
    in srgb,
    var(--surface-elevated) calc(var(--app-surface-opacity, 0.96) * 100%),
    transparent
  );
  --workspace-sidebar-surface: var(--material-elevated);
  --workspace-activitybar-surface: var(--material-panel);
  --workspace-statusbar-surface: var(--material-elevated);
  --workspace-session-surface: var(--material-panel);
  --workspace-session-active-surface: var(--material-elevated);
  --workspace-session-header-surface: var(--material-elevated);
  --workspace-terminal-shell-surface: var(--material-elevated);
  --workspace-terminal-toolbar-surface: var(--material-panel);
  --workspace-terminal-tabs-surface: var(--material-panel);
  --workspace-editor-shell-surface: var(--material-panel);
  --workspace-editor-toolbar-surface: var(--material-elevated);
  --workspace-editor-toolbar-border: color-mix(
    in srgb,
    var(--border-default) 72%,
    var(--status-info-fg) 28%
  );
  --ws-backdrop-filter: var(--material-backdrop-filter);
}

:root[data-theme="hc-dark"],
:root[data-theme="hc-light"] {
  --material-backdrop-filter: none;
  --material-panel: var(--surface-panel);
  --material-elevated: var(--surface-elevated);
  --material-overlay: var(--surface-elevated);
  --material-local-overlay: var(--surface-panel);
  --material-shell-page: var(--surface-page);
  --material-shell-topbar: var(--surface-elevated);
  --workspace-sidebar-surface: var(--surface-panel);
  --workspace-activitybar-surface: var(--surface-panel);
  --workspace-statusbar-surface: var(--surface-panel);
  --workspace-session-surface: var(--surface-panel);
  --workspace-session-active-surface: var(--surface-elevated);
  --workspace-session-header-surface: var(--surface-elevated);
  --workspace-terminal-shell-surface: var(--surface-panel);
  --workspace-terminal-toolbar-surface: var(--surface-elevated);
  --workspace-terminal-tabs-surface: var(--surface-elevated);
  --workspace-editor-shell-surface: var(--surface-panel);
  --workspace-editor-toolbar-surface: var(--surface-elevated);
  --workspace-editor-toolbar-border: color-mix(
    in srgb,
    var(--border-default) 72%,
    var(--status-info-fg) 28%
  );
  --ws-backdrop-filter: none;
}

/* ========== Mobile / Touch Override (Phase 0) ========== */
@media (max-width: 899px) {
  :root {
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;
    --touch-target-large: 56px;
    --touch-spacing-min: 12px;
    --touch-hit-slop: 8px;
  }
}
