:root {
  --color-bg: #0b1020;
  --color-bg-secondary: #111a2e;
  --color-primary: #4f7cff;
  --color-primary-hover: #6b93ff;
  --color-secondary: #22d3ee;
  --color-accent: #34d399;
  --gradient-brand: linear-gradient(135deg, #4f7cff 0%, #22d3ee 100%);
  --gradient-hero: radial-gradient(
    ellipse at top left,
    rgba(79, 124, 255, 0.16),
    transparent 55%
  );
  --color-text: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-text-disabled: #64748b;
  --color-surface: #111827;
  --color-surface-elevated: #172238;
  --color-surface-hover: #18243b;
  --color-border: #26344d;
  --color-input-bg: #0f172a;
  --glass-bg: rgba(17, 26, 46, 0.72);
  --glass-border: rgba(148, 163, 184, 0.16);
  --glass-blur: blur(16px);
  --color-success: #22c55e;
  --color-warning: #fbbf24;
  --color-error: #f87171;
  --color-info: #38bdf8;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

[data-theme="light"] {
  --color-bg: #f7f9fc;
  --color-bg-secondary: #ffffff;
  --color-primary: #3f6ff5;
  --color-secondary: #0891b2;
  --color-text: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #64748b;
  --color-surface: #ffffff;
  --color-surface-elevated: #f1f5f9;
  --color-border: #e2e8f0;
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(0, 0, 0, 0.08);
}