/* variables.css - CSS Custom Properties for SolidPoint */

:root {
  /* Colors */
  --primary-purple: #AB4ABB;
  --primary-blue: #2768B2;
  --primary-orange: #FD750A;
  --secondary-orange: #F6862F;
  
  /* Text Colors */
  --text-white: #F0F0F0;
  --text-light-gray: #B2B1B7;
  --text-dark-gray: #88868B;
  --text-purple: #9643AC;
  
  /* Background Colors */
  --bg-primary: radial-gradient(ellipse 67.97% 67.97% at 50.00% 27.49%, #050534 0%, #211C9D 100%);
  --bg-dark: #0C050D;
  --bg-dark-alt: #15121C;
  --bg-dark-variant: #16121C;
  
  /* Glass/Blur Effects */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(240, 240, 240, 0.15);
  --glass-hover: rgba(255, 255, 255, 0.1);
  --card-bg: rgba(12, 5, 13, 0.6);
  --card-bg-alt: rgba(12, 5, 13, 0.2);
  
  /* Purple Variants */
  --purple-light: rgba(171, 74, 187, 0.1);
  --purple-border: rgba(171, 74, 187, 0.15);
  --purple-border-hover: rgba(171, 74, 187, 0.3);
  --purple-hover: rgba(171, 74, 187, 0.2);
  
  /* Typography */
  --font-primary: 'Inter', sans-serif;
  --font-heading: 'Sora', sans-serif;
  
  /* Font Sizes */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 28px;
  --fs-4xl: 32px;
  --fs-5xl: 48px;
  --fs-6xl: 56px;
  --fs-7xl: 80px;
  
  /* Font Weights */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  
  /* Spacing */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;
  --space-5xl: 60px;
  --space-6xl: 80px;
  --space-7xl: 120px;
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 50px;
  
  /* Shadows */
  --shadow-sm: 0 4px 15px rgba(171, 74, 187, 0.3);
  --shadow-md: 0 8px 25px rgba(171, 74, 187, 0.2);
  --shadow-lg: 0 12px 40px rgba(171, 74, 187, 0.15);
  --shadow-xl: 0 15px 50px rgba(171, 74, 187, 0.2);
  --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.3);
  --shadow-dark: 0 20px 60px rgba(0, 0, 0, 0.4);
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Z-index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 1040;
  --z-popover: 1050;
  --z-tooltip: 1060;
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #AB4ABB 0%, #2768B2 100%);
  --gradient-card: linear-gradient(155deg, #100F18 0%, #181533 84%, #1D1B55 100%);
  --gradient-text: linear-gradient(135deg, #AB4ABB 0%, #2768B2 100%);
  
  /* Breakpoints (for reference in JS) */
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-laptop: 1024px;
  --bp-desktop: 1200px;
}