:root {
  /* Legacy core tokens */
  --bg: #050508;
  --bg-elevated: #0e0f16;
  --border: #2a2e42;
  --text: #f2f4f9;
  --muted: #8b92a8;
  --brand-cyan: #00c8ff;
  --brand-blue: #0088e8;
  --brand-magenta: #c44bff;
  --brand-purple: #7c3aed;
  --accent: #b56fff;
  --accent-dim: #8b4ce6;
  --accent-gradient: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-magenta) 100%);
  --success: #3dd8a8;
  --radius: 12px;
  --radius-sm: 8px;
  --font: "DM Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --scroll-anchor-offset: 1.5rem;
  --app-max-width: 1200px;
  --sidebar-bg: #07070c;
  --sidebar-surface: #0c0d14;
  --sidebar-border: #1a1c2a;
  --sidebar-hover: rgba(255, 255, 255, 0.06);
  --sidebar-active: var(--brand-cyan);
  --sidebar-width: 262px;
  --studio-green: var(--brand-cyan);
  --glass-bg: rgba(12, 14, 22, 0.82);
  --glass-border: rgba(255, 255, 255, 0.13);
  --glass-blur: 18px;
  --surface-card-glass: rgba(255, 255, 255, 0.05);
  --surface-card-glass-border: rgba(255, 255, 255, 0.13);
  --surface-card-glass-blur: 16px;
  --list-card-glass-bg: var(--surface-card-glass);
  --list-card-glass-blur: 14px;
  --select-bg: #181b24;
  --select-bg-hover: #22262f;
  --select-border: rgba(255, 255, 255, 0.12);
  --select-option-bg: #14161d;
  --select-option-fg: #e9ebf0;
  --scrollbar-track: rgba(0, 0, 0, 0.22);
  --scrollbar-thumb: color-mix(in srgb, var(--muted) 42%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--muted) 58%, transparent);
  --select-option-checked-bg: color-mix(in srgb, var(--accent) 38%, #16181f);
  --select-focus-ring: color-mix(in srgb, var(--accent) 70%, transparent);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b919d' d='M3 4.2 6 8.4 9 4.2z'/%3E%3C/svg%3E");

  /* Semantic aliases for staged refactor */
  --color-bg: var(--bg);
  --color-bg-elevated: var(--bg-elevated);
  --color-text: var(--text);
  --color-text-muted: var(--muted);
  --color-border: var(--border);
  --color-accent: var(--accent);
  --color-accent-dim: var(--accent-dim);
  --color-success: var(--success);
  --color-warning: #e2a308;

  --surface-glass-bg: var(--surface-card-glass);
  --surface-glass-border: var(--surface-card-glass-border);
  --surface-glass-blur: var(--surface-card-glass-blur);
  --surface-list-bg: var(--list-card-glass-bg);
  --surface-list-blur: var(--list-card-glass-blur);
  --field-bg: #0e1014;

  --radius-md: var(--radius);
  --radius-pill: 999px;

  --space-1: 0.25rem;
  --space-2: 0.35rem;
  --space-3: 0.5rem;
  --space-4: 0.65rem;
  --space-5: 0.85rem;
  --space-6: 1rem;
  --space-7: 1.25rem;
  --space-8: 1.35rem;

  --font-sans: var(--font);
  --font-mono: var(--mono);
  --text-sm: 0.875rem;
  --text-md: 0.95rem;
  --text-lg: 1.1rem;
  --text-xl: 1.12rem;

  --duration-fast: 0.15s;
  --duration-press: 0.1s;
  --ease-standard: ease;

  --z-sidebar: 50;
  --z-sticky: 30;
  --z-dropdown: 40;
  --z-modal-backdrop: 12000;
  --z-modal: 13000;

  --shadow-soft: 0 1px 8px rgba(0, 0, 0, 0.25);
  --shadow-card: 0 14px 36px rgba(0, 0, 0, 0.22);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.45);

  /* Ghost / outline buttons on dark glass — clearer edge than flat --border alone */
  --btn-ghost-bg: rgba(255, 255, 255, 0.04);
  --btn-ghost-bg-hover: rgba(255, 255, 255, 0.075);
  --btn-ghost-border: rgba(255, 255, 255, 0.15);
  --btn-ghost-border-hover: rgba(255, 255, 255, 0.26);
  --btn-ghost-inset: rgba(255, 255, 255, 0.055);
}