/* ===================================
   DESIGN SYSTEM - CSS VARIABLES
   CYBERPUNK/GAMER THEME
   ================================== */

:root {
  /* === COLORS - CYBERPUNK/NEON THEME === */
  
  /* Primary Palette - Neon Green */
  --color-primary: #00ff88;
  --color-primary-dark: #00cc6a;
  --color-primary-light: #33ffaa;
  --color-primary-glow: rgba(0, 255, 136, 0.5);
  
  /* Accent Colors - Cyberpunk */
  --color-accent: #00ffff;
  --color-accent-dark: #00cccc;
  --color-purple: #b74dff;
  --color-purple-dark: #9333ea;
  --color-pink: #ff00ff;
  --color-pink-dark: #cc00cc;
  --color-blue-neon: #00d4ff;
  
  /* Neutrals - Dark Cyberpunk with Better Contrast */
  --color-dark: #0a0e27;
  --color-dark-lighter: #1a1f3a;
  --color-dark-blue: #0f1729;
  --color-gray-900: #0a0e27;
  --color-gray-800: #1a1f3a;
  --color-gray-700: #2a2f4a;
  --color-gray-600: #94a3b8;
  --color-gray-500: #b4bed9;
  --color-gray-400: #cbd5e1;
  --color-gray-300: #e0e7f0;
  --color-gray-200: #eef3f8;
  --color-gray-100: #f5f8fb;
  --color-gray-50: #fafcfe;
  --color-white: #f0f4f8;
  --color-ice: #f5f9fc;
  
  /* Semantic Colors */
  --color-success: #00ff88;
  --color-warning: #ffaa00;
  --color-error: #ff0055;
  --color-info: #00d4ff;
  
  /* Gradients - Cyberpunk Style */
  --gradient-primary: linear-gradient(135deg, #00ff88 0%, #00d4ff 100%);
  --gradient-hero: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 30%, #2a2f4a 60%, #0a0e27 100%);
  --gradient-neon: linear-gradient(135deg, #00ff88 0%, #00d4ff 50%, #b74dff 100%);
  --gradient-accent: linear-gradient(135deg, #ff00ff 0%, #00ffff 100%);
  --gradient-purple: linear-gradient(135deg, #b74dff 0%, #ff00ff 100%);
  --gradient-dark: linear-gradient(180deg, #0a0e27 0%, #1a1f3a 100%);
  
  /* Glass effect */
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  
  /* === TYPOGRAPHY - GAMER/TECH === */
  --font-primary: 'Rajdhani', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Orbitron', 'Rajdhani', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  
  /* Font Sizes */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */
  --text-6xl: 3.75rem;     /* 60px */
  --text-7xl: 4.5rem;      /* 72px */
  
  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;
  
  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* === SPACING === */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */
  
  /* === BORDERS === */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.75rem;
  --border-radius-xl: 1rem;
  --border-radius-2xl: 1.5rem;
  --border-radius-full: 9999px;
  
  /* === SHADOWS - NEON GLOW === */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(0, 255, 136, 0.5);
  --shadow-glow-strong: 0 0 40px rgba(0, 255, 136, 0.8), 0 0 80px rgba(0, 255, 136, 0.4);
  --shadow-neon-green: 0 0 10px rgba(0, 255, 136, 0.5), 0 0 20px rgba(0, 255, 136, 0.3), 0 0 30px rgba(0, 255, 136, 0.1);
  --shadow-neon-cyan: 0 0 10px rgba(0, 212, 255, 0.5), 0 0 20px rgba(0, 212, 255, 0.3);
  --shadow-neon-purple: 0 0 10px rgba(183, 77, 255, 0.5), 0 0 20px rgba(183, 77, 255, 0.3);
  
  /* === TRANSITIONS === */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Easing functions */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* === LAYOUT === */
  --max-width-sm: 640px;
  --max-width-md: 768px;
  --max-width-lg: 1024px;
  --max-width-xl: 1280px;
  --max-width-2xl: 1536px;
  
  /* Container padding */
  --container-padding: var(--space-4);
  --container-padding-md: var(--space-6);
  --container-padding-lg: var(--space-8);
  
  /* === Z-INDEX === */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal: 40;
  --z-popover: 50;
  --z-tooltip: 60;
  
  /* === ANIMATIONS === */
  --animation-duration-fast: 200ms;
  --animation-duration-normal: 300ms;
  --animation-duration-slow: 500ms;
  --animation-duration-slower: 700ms;
}

/* === RESPONSIVE BREAKPOINTS === */
/* Mobile-first approach */
/* xs: 0-639px (default) */
/* sm: 640px+ */
/* md: 768px+ */
/* lg: 1024px+ */
/* xl: 1280px+ */
/* 2xl: 1536px+ */