/**
 * CSS Variables (Custom Properties)
 * 
 * Why variables:
 * - Centralized control of colors, sizes, spacing
 * - Easy to change theme or adapt to brand
 * - Design consistency across the site
 * - Support for dark/light theme in the future
 */

:root {
  /* Vibrant Gradient Colors */
  --color-primary: #ff6b9d;
  --color-primary-dark: #ff4d7a;
  --color-primary-light: #ff8fb3;
  
  --color-secondary: #c471ed;
  --color-secondary-dark: #b84de8;
  
  --color-accent: #12c2e9;
  --color-accent-dark: #0ba8d1;
  
  --color-accent-2: #f64f59;
  --color-accent-3: #fad961;
  
  /* Text Colors */
  --color-text: #ffffff;
  --color-text-secondary: #e0e0e0;
  --color-text-muted: #b0b0b0;
  
  /* Background Colors - Dark with gradient support */
  --color-bg: #0a0a0f;
  --color-bg-secondary: rgba(20, 20, 30, 0.8);
  --color-bg-tertiary: rgba(30, 30, 45, 0.6);
  
  /* Glassmorphism backgrounds */
  --color-glass: rgba(255, 255, 255, 0.05);
  --color-glass-border: rgba(255, 255, 255, 0.1);
  
  /* Border Colors */
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-light: rgba(255, 255, 255, 0.2);
  
  /* Gradient Combinations */
  --gradient-primary: linear-gradient(135deg, #ff6b9d 0%, #c471ed 50%, #12c2e9 100%);
  --gradient-secondary: linear-gradient(135deg, #f64f59 0%, #c471ed 50%, #12c2e9 100%);
  --gradient-accent: linear-gradient(135deg, #fad961 0%, #f64f59 100%);
  --gradient-bg: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%);
  --gradient-hero: radial-gradient(ellipse at top, rgba(198, 113, 237, 0.15) 0%, transparent 50%),
                    radial-gradient(ellipse at bottom, rgba(18, 194, 233, 0.15) 0%, transparent 50%);
  
  /* Typography */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-family-mono: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
  
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Spacing */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
  --spacing-3xl: 4rem;     /* 64px */
  --spacing-4xl: 6rem;     /* 96px */
  
  /* Layout */
  --container-width: 1200px;
  --container-padding: var(--spacing-lg);
  
  --border-radius-sm: 0.25rem;   /* 4px */
  --border-radius-md: 0.5rem;    /* 8px */
  --border-radius-lg: 0.75rem;   /* 12px */
  --border-radius-xl: 1rem;      /* 16px */
  --border-radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
  
  /* Z-index layers */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-tooltip: 500;
}