/* CSS Variables for Dynamic Theming */
:root {
  /* Dark Mode Colors (Default) */
  --bg-primary: #0F0F1E;
  --bg-secondary: #1A1A2E;
  --bg-tertiary: #16162A;
  --bg-card: rgba(26, 26, 46, 0.6);
  --bg-hover: rgba(168, 85, 247, 0.1);
  
  --text-primary: #E5E7EB;
  --text-secondary: #9CA3AF;
  --text-tertiary: #6B7280;
  
  --accent: #A855F7;
  --accent-hover: #9333EA;
  --accent-light: rgba(168, 85, 247, 0.2);
  
  --border: #2D2D44;
  --border-light: rgba(255, 255, 255, 0.1);
  
  --shadow: rgba(0, 0, 0, 0.3);
  --shadow-lg: rgba(0, 0, 0, 0.5);
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #A855F7 0%, #6366F1 100%);
  --gradient-secondary: linear-gradient(135deg, #EC4899 0%, #A855F7 100%);
  
  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  
  /* Border Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* Light Mode */
[data-theme="light"] {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F9FAFB;
  --bg-tertiary: #F3F4F6;
  --bg-card: rgba(255, 255, 255, 0.8);
  --bg-hover: rgba(147, 51, 234, 0.1);
  
  --text-primary: #1F2937;
  --text-secondary: #6B7280;
  --text-tertiary: #9CA3AF;
  
  --accent: #9333EA;
  --accent-hover: #7C3AED;
  --accent-light: rgba(147, 51, 234, 0.1);
  
  --border: #E5E7EB;
  --border-light: rgba(0, 0, 0, 0.1);
  
  --shadow: rgba(0, 0, 0, 0.1);
  --shadow-lg: rgba(0, 0, 0, 0.15);
  
  --gradient-primary: linear-gradient(135deg, #9333EA 0%, #6366F1 100%);
  --gradient-secondary: linear-gradient(135deg, #EC4899 0%, #9333EA 100%);
}

/* Smooth theme transition */
* {
  transition: background-color var(--transition-normal), 
              color var(--transition-normal), 
              border-color var(--transition-normal);
}