/* ============================================
   Design System - CSS Variables
   Primary Brand Color: #712cf9
   Dark Theme Only
   ============================================ */

:root {
  /* ============================================
     Brand Colors
     ============================================ */
  
  /* Primary Brand Color */
  --brand-primary: #712cf9;
  --brand-primary-rgb: 113, 44, 249;
  --brand-primary-dark: #5a23c8;
  --brand-primary-light: #8b4fff;
  
  /* Secondary Colors */
  --color-secondary: #6c757d;
  
  /* Semantic Colors */
  --color-success: #22c55e;
  --color-success-rgb: 34, 197, 94;
  --color-info: #0dcaf0;
  --color-warning: #ffc107;
  --color-danger: #f92c5c;
  --color-accent: #ffd93d; /* Golden yellow for CTAs */
  
  /* ============================================
     Gradients
     ============================================ */
  
  --gradient-brand: linear-gradient(135deg, #5b21b6 0%, #4c1d95 100%);
  --gradient-brand-horizontal: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
  --gradient-hero: linear-gradient(135deg, rgba(59, 73, 137, 0.95) 0%, rgba(75, 48, 103, 0.95) 50%, rgba(59, 73, 137, 0.95) 100%);
  --gradient-cta: linear-gradient(135deg, rgba(34, 197, 94, 0.9) 0%, rgba(22, 163, 74, 0.9) 100%);
  
  /* ============================================
     Dark Theme Backgrounds
     ============================================ */
  
  --bg-primary: #0f0f23;
  --bg-secondary: #1a1a2e;
  --bg-tertiary: #252542;
  --bg-surface: #1e1e3f;
  --bg-surface-raised: #2a2a4e;
  
  /* ============================================
     Text Colors
     ============================================ */
  
  --text-primary: #ffffff;
  --text-secondary: #cbd5e0;
  --text-muted: #94a3b8;
  --text-disabled: #64748b;
  --text-on-brand: #ffffff;
  
  /* ============================================
     Borders
     ============================================ */
  
  --border-color: rgba(139, 79, 255, 0.2);
  --border-subtle: rgba(139, 79, 255, 0.1);
  --border-strong: rgba(139, 79, 255, 0.4);
  --border-width: 1px;
  --border-width-thick: 2px;
  
  /* ============================================
     Shadows
     ============================================ */
  
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 30px 60px rgba(0, 0, 0, 0.6);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  
  /* ============================================
     Glass Morphism
     ============================================ */
  
  --glass-white-5: rgba(255, 255, 255, 0.05);
  --glass-white-8: rgba(255, 255, 255, 0.08);
  --glass-white-10: rgba(255, 255, 255, 0.1);
  --glass-white-15: rgba(255, 255, 255, 0.15);
  --glass-white-20: rgba(255, 255, 255, 0.2);
  --glass-white-30: rgba(255, 255, 255, 0.3);
  --glass-black-10: rgba(0, 0, 0, 0.1);
  --glass-black-20: rgba(0, 0, 0, 0.2);
  --glass-black-30: rgba(0, 0, 0, 0.3);
  
  /* ============================================
     Typography Scale
     ============================================ */
  
  --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 */
  
  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  
  /* Font Families */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  
  /* ============================================
     Spacing Scale
     ============================================ */
  
  --space-0: 0;
  --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 */
  
  /* ============================================
     Border Radius
     ============================================ */
  
  --radius-none: 0;
  --radius-sm: 0.25rem;    /* 4px */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.5rem;     /* 8px */
  --radius-xl: 0.75rem;    /* 12px */
  --radius-2xl: 1rem;      /* 16px */
  --radius-3xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;   /* Pills */
  
  /* ============================================
     Transitions
     ============================================ */
  
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-all-fast: all 150ms ease;
  --transition-all-base: all 300ms ease;
  --transition-all-slow: all 500ms ease;
  
  /* ============================================
     Backdrop Filters
     ============================================ */
  
  --blur-none: blur(0);
  --blur-sm: blur(4px);
  --blur-md: blur(8px);
  --blur-lg: blur(16px);
  --blur-xl: blur(24px);
  
  /* ============================================
     Z-Index Scale
     ============================================ */
  
  --z-below: -1;
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-notification: 1080;
  --z-max: 9999;
  
  /* ============================================
     Layout
     ============================================ */
  
  --container-max-width: 1200px;
  --container-padding: var(--space-4);
  --section-padding-y: var(--space-16);
  --section-padding-x: var(--space-4);
  
  /* ============================================
     Breakpoints (for reference in JS)
     ============================================ */
  
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1440px;
  
  /* ============================================
     Component Specific (deprecated - remove gradually)
     ============================================ */
  
  --header-bg: var(--gradient-brand);
  --header-text: var(--text-primary);
  --footer-bg: #0a0a1a;
  --footer-text: #e2e8f0;
  --card-bg: var(--bg-surface);
  --button-primary-bg: var(--gradient-brand);
  --button-primary-text: var(--text-primary);
  
  /* ============================================
     Legacy Aliases (for backward compatibility)
     ============================================ */
  
  --color-primary: var(--brand-primary);
  --color-primary-hover: rgba(255, 255, 255, 0.8);
  --color-primary-light: var(--brand-primary-light);
  --color-text: var(--text-primary);
  --color-text-muted: var(--text-muted);
  --color-text-secondary: var(--text-secondary);
  --color-background: var(--bg-primary);
  --color-background-alt: var(--bg-secondary);
  --color-surface: var(--bg-surface);
  --color-border: var(--border-color);
  --bg-light-content: var(--bg-secondary);
  --border-light: var(--border-subtle);
  --glass-white: var(--glass-white-10);
  --glass-light: var(--glass-white-5);
  --glass-brand: rgba(113, 44, 249, 0.15);
  --glass-white-10: var(--glass-white-5);
  --glass-white-15: var(--glass-white-8);
  --glass-white-20: var(--glass-white-10);
  --glass-border: 1px solid var(--glass-white-10);
}

/* ============================================
   Common Animations
   ============================================ */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slideInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInDown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================
   Utility: Responsive Breakpoint Mixins
   Use these in media queries for consistency
   ============================================ */

/* Example usage:
   @media (max-width: 768px) { ... }  // Tablet and below
   @media (max-width: 480px) { ... }  // Mobile only
   @media (min-width: 1024px) { ... } // Desktop and above
*/