:root {
  /* Background colors */
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-glass: rgba(255, 255, 255, 0.03);
  --bg-hover: rgba(255, 255, 255, 0.1);

  /* Accent colors */
  --accent-red: #ef4444;
  --accent-green: #22c55e;
  --accent-blue: #3b82f6;
  --accent-purple: #8b5cf6;
  --accent-orange: #f97316;
  --accent-yellow: #eab308;

  /* Text colors */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-disabled: #475569;

  /* Border colors */
  --border: rgba(255, 255, 255, 0.08);
  --border-focus: rgba(59, 130, 246, 0.5);

  /* Shadows */
  --shadow-glow-red: 0 0 20px rgba(239, 68, 68, 0.3);
  --shadow-glow-green: 0 0 20px rgba(34, 197, 94, 0.2);
  --shadow-glow-blue: 0 0 20px rgba(59, 130, 246, 0.25);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  --gradient-primary-hover: linear-gradient(135deg, #2563eb, #7c3aed);

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* Border radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 400ms ease-out;

  /* Z-index layers */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-modal: 50;
  --z-tooltip: 60;
}