:root,
[data-theme="dark"] {
  --bg-primary: #0b0b13;
  --bg-secondary: rgba(14, 14, 24, 0.9);
  --bg-tertiary: rgba(255, 255, 255, 0.04);
  --bg-elevated: rgba(20, 20, 36, 0.95);
  --bg-glass: rgba(14, 14, 24, 0.75);
  --terminal-bg: #080810;
  --text-primary: #e2e2ec;
  --text-secondary: #7878a0;
  --text-dimmed: #3e3e58;
  --border-color: rgba(255, 255, 255, 0.055);
  --border-subtle: rgba(255, 255, 255, 0.025);
  --border-strong: rgba(255, 255, 255, 0.1);
  --accent: #6366f1;
  --accent-hover: #818cf8;
  --accent-dim: #4f52cc;
  --accent-glow: rgba(99, 102, 241, 0.18);
  --accent-soft: rgba(99, 102, 241, 0.08);
  --accent-gradient: linear-gradient(135deg, #6366f1, #a78bfa);
  --green: #34d399;
  --green-glow: rgba(52, 211, 153, 0.2);
  --red: #f87171;
  --red-glow: rgba(248, 113, 113, 0.15);
  --blue: #60a5fa;
  --purple: #a78bfa;
  --cyan: #22d3ee;
  --yellow: #fbbf24;
  --orange: #fb923c;
  --gray: #6b7280;
  --key-bg: rgba(26, 26, 46, 0.9);
  --key-bg-highlight: rgba(255, 255, 255, 0.035);
  --key-border: rgba(255, 255, 255, 0.07);
  --key-depth: rgba(0, 0, 0, 0.5);
  --key-active-bg: rgba(99, 102, 241, 0.15);
  --sidebar-bg: #09090f;
  --sidebar-border: rgba(255, 255, 255, 0.04);
  --scrollbar-thumb: rgba(255, 255, 255, 0.07);
  --scrollbar-track: transparent;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
  --blur-amount: 20px;
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 320ms cubic-bezier(0.16, 1, 0.3, 1);
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 100px;
}

[data-theme="light"] {
  --bg-primary: #f4f4f8;
  --bg-secondary: rgba(255, 255, 255, 0.9);
  --bg-tertiary: rgba(0, 0, 0, 0.035);
  --bg-elevated: rgba(255, 255, 255, 0.95);
  --bg-glass: rgba(255, 255, 255, 0.75);
  --terminal-bg: #fafafa;
  --text-primary: #0f0f1a;
  --text-secondary: #60607a;
  --text-dimmed: #aaaabb;
  --border-color: rgba(0, 0, 0, 0.07);
  --border-subtle: rgba(0, 0, 0, 0.04);
  --border-strong: rgba(0, 0, 0, 0.12);
  --accent: #5558eb;
  --accent-hover: #4347d4;
  --accent-dim: #7b7ef5;
  --accent-glow: rgba(85, 88, 235, 0.12);
  --accent-soft: rgba(85, 88, 235, 0.07);
  --accent-gradient: linear-gradient(135deg, #5558eb, #9b59f5);
  --green: #059669;
  --green-glow: rgba(5, 150, 105, 0.12);
  --red: #dc2626;
  --red-glow: rgba(220, 38, 38, 0.1);
  --blue: #2563eb;
  --purple: #7c3aed;
  --cyan: #0891b2;
  --yellow: #d97706;
  --orange: #ea580c;
  --gray: #9ca3af;
  --key-bg: rgba(255, 255, 255, 0.95);
  --key-bg-highlight: rgba(255, 255, 255, 0.6);
  --key-border: rgba(0, 0, 0, 0.09);
  --key-depth: rgba(0, 0, 0, 0.12);
  --key-active-bg: rgba(85, 88, 235, 0.08);
  --sidebar-bg: #eeeef4;
  --sidebar-border: rgba(0, 0, 0, 0.05);
  --scrollbar-thumb: rgba(0, 0, 0, 0.1);
  --scrollbar-track: transparent;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.07);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --blur-amount: 20px;
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 320ms cubic-bezier(0.16, 1, 0.3, 1);
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 100px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-primary: #f4f4f8;
    --bg-secondary: rgba(255, 255, 255, 0.9);
    --bg-tertiary: rgba(0, 0, 0, 0.035);
    --bg-elevated: rgba(255, 255, 255, 0.95);
    --bg-glass: rgba(255, 255, 255, 0.75);
    --terminal-bg: #fafafa;
    --text-primary: #0f0f1a;
    --text-secondary: #60607a;
    --text-dimmed: #aaaabb;
    --border-color: rgba(0, 0, 0, 0.07);
    --border-subtle: rgba(0, 0, 0, 0.04);
    --border-strong: rgba(0, 0, 0, 0.12);
    --accent: #5558eb;
    --accent-hover: #4347d4;
    --accent-dim: #7b7ef5;
    --accent-glow: rgba(85, 88, 235, 0.12);
    --accent-soft: rgba(85, 88, 235, 0.07);
    --accent-gradient: linear-gradient(135deg, #5558eb, #9b59f5);
    --green: #059669;
    --green-glow: rgba(5, 150, 105, 0.12);
    --red: #dc2626;
    --red-glow: rgba(220, 38, 38, 0.1);
    --blue: #2563eb;
    --purple: #7c3aed;
    --cyan: #0891b2;
    --yellow: #d97706;
    --orange: #ea580c;
    --gray: #9ca3af;
    --key-bg: rgba(255, 255, 255, 0.95);
    --key-bg-highlight: rgba(255, 255, 255, 0.6);
    --key-border: rgba(0, 0, 0, 0.09);
    --key-depth: rgba(0, 0, 0, 0.12);
    --key-active-bg: rgba(85, 88, 235, 0.08);
    --sidebar-bg: #eeeef4;
    --sidebar-border: rgba(0, 0, 0, 0.05);
    --scrollbar-thumb: rgba(0, 0, 0, 0.1);
    --scrollbar-track: transparent;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.07);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
    --blur-amount: 20px;
  }
}