/* css/variables.css */
:root {
  /* Colors - True Dark Theme */
  --color-bg: #050505; /* Super deep dark */
  --color-surface: #0a0a0c;
  --color-surface-hover: #121216;
  --color-text: #f0f0f0;
  --color-text-muted: #888890;
  
  /* Primary Accent - Vibrant Neon Orange */
  --color-primary: #ff5500; 
  --color-primary-hover: #ff7733;
  --color-primary-glow: rgba(255, 85, 0, 0.4);
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #ff2a00, #ff7b00);
  --gradient-surface: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  
  /* Glassmorphism */
  --glass-bg: rgba(10, 10, 12, 0.6);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.15);
  
  /* Typography */
  --font-family-heading: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-family-body: 'Inter', system-ui, -apple-system, sans-serif;
  
  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-xxl: 6rem;
  
  /* Border Radius - Tech Style */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 50px;
  
  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Shadows */
  --shadow-glow: 0 0 20px var(--color-primary-glow);
  --shadow-card: 0 10px 30px -10px rgba(0,0,0,0.5);
}