/**
 * Dynamic Theme Variables
 * CSS Custom Properties for configurable theming
 * Replace hardcoded colors with dynamic values
 */

:root {
    /* Primary Brand Colors */
    --primary-color: #3b82f6;
    --primary-dark: #1d4ed8;
    --primary-light: #60a5fa;
    --primary-lighter: #93c5fd;
    
    /* Secondary Colors */
    --secondary-color: #8b5cf6;
    --secondary-dark: #7c3aed;
    
    /* Success Colors */
    --success-color: #10b981;
    --success-dark: #059669;
    --success-light: #22c55e;
    --success-lighter: #16a34a;
    
    /* Warning Colors */
    --warning-color: #f59e0b;
    --warning-dark: #d97706;
    --warning-light: #fbbf24;
    --warning-orange: #f97316;
    --warning-orange-dark: #ea580c;
    --warning-orange-light: #fb923c;
    
    /* Error Colors */
    --error-color: #ef4444;
    --error-dark: #dc2626;
    --error-light: #fca5a5;
    
    /* Neutral Colors */
    --gray-25: #fefefe;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* Extended Color Palette */
    --blue-500: #3b82f6;
    --green-500: #10b981;
    --purple-500: #8b5cf6;
    --red-500: #ef4444;
    --orange-500: #f97316;
    --yellow-500: #eab308;
    --teal-500: #14b8a6;
    --indigo-500: #6366f1;
    
    /* Additional Color Variants */
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --red-300: #fca5a5;
    --yellow-400: #fbbf24;
    --primary-400: #667eea;
    
    /* Primary Color Variants */
    --primary-200: rgba(74, 107, 255, 0.2);
    --primary-400: #60a5fa;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    --gradient-secondary: linear-gradient(135deg, var(--secondary-500), var(--secondary-600));
    --gradient-success: linear-gradient(135deg, var(--success-500), var(--success-600));
    --gradient-warning: linear-gradient(135deg, var(--warning-500), var(--warning-600));
    --gradient-error: linear-gradient(135deg, var(--error-500), var(--error-600));
    --gradient-neutral: linear-gradient(135deg, var(--neutral-600), var(--neutral-700));
    --gradient-accent: linear-gradient(to right, #60a5fa, #a855f7);
    --gradient-background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 25%, #f0f0ff 50%, #e6e6fa 75%, #f0f8ff 100%);
    --gradient-background-dark: linear-gradient(135deg, #ffffff 0%, #f9fafb 25%, #f0f9ff 100%);
    --gradient-moderation: linear-gradient(135deg, #ff6b6b 0%, #feca57 50%, #ff9ff3 100%);
    --gradient-moderation-dark: linear-gradient(135deg, #ff3737 0%, #ffa07a 50%, #ff69b4 100%);
    
    /* Alpha Transparency Variants */
    --primary-alpha-5: rgba(59, 130, 246, 0.05);
    --primary-alpha-10: rgba(59, 130, 246, 0.1);
    --primary-alpha-20: rgba(59, 130, 246, 0.2);
    --primary-alpha-30: rgba(59, 130, 246, 0.3);
    --primary-alpha-50: rgba(59, 130, 246, 0.5);
    --success-alpha-10: rgba(34, 197, 94, 0.1);
    --success-alpha-20: rgba(34, 197, 94, 0.2);
    --error-alpha-5: rgba(239, 68, 68, 0.05);
    --error-alpha-10: rgba(239, 68, 68, 0.1);
    --error-alpha-15: rgba(239, 68, 68, 0.15);
    --error-alpha-20: rgba(239, 68, 68, 0.2);
    --success-alpha-30: rgba(34, 197, 94, 0.3);
    --success-alpha-50: rgba(34, 197, 94, 0.5);
    --gray-alpha-10: rgba(107, 114, 128, 0.1);
    --gray-alpha-20: rgba(107, 114, 128, 0.2);
    --gray-alpha-30: rgba(107, 114, 128, 0.3);
    --gray-alpha-50: rgba(107, 114, 128, 0.5);
    --white-alpha-80: rgba(255, 255, 255, 0.8);
    --white-alpha-90: rgba(255, 255, 255, 0.9);
    --black-alpha-50: rgba(0, 0, 0, 0.5);
    --moderation-alpha-10: rgba(255, 107, 107, 0.1);
    --moderation-alpha-20: rgba(255, 107, 107, 0.2);
    --moderation-alpha-30: rgba(255, 107, 107, 0.3);
    --moderation-alpha-50: rgba(255, 107, 107, 0.5);
    --shine-overlay: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 100%);
    /* Header Gradients */
    --gradient-header: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-header-overlay: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 50%, rgba(255, 154, 158, 0.9) 100%);
    --gradient-header-dark: linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(31, 41, 55, 0.95) 50%, rgba(55, 65, 81, 0.95) 100%);
    
    /* Background Gradients */
    --gradient-background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #ff9a9e 100%);
    --gradient-background-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #374151 100%);
    --gradient-light: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    
    /* Navigation Gradients */
    --gradient-nav-hover: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    
    /* Top Navigation Gradients */
    --gradient-topnav: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(88, 28, 135, 0.95) 50%, rgba(15, 23, 42, 0.95) 100%);
    --gradient-topnav-overlay: radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 50%, rgba(168, 85, 247, 0.1) 0%, transparent 50%), radial-gradient(circle at 40% 20%, rgba(236, 72, 153, 0.1) 0%, transparent 50%);
    
    /* Floating Orb Gradients */
    --gradient-orb-primary: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(147, 51, 234, 0.3));
    --gradient-orb-secondary: linear-gradient(135deg, rgba(236, 72, 153, 0.3), rgba(251, 146, 60, 0.3));
    --gradient-orb-success: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(59, 130, 246, 0.3));
    
    /* Special Gradients */
    --gradient-rainbow: linear-gradient(135deg, #ff6b6b 0%, #feca57 50%, #ff9ff3 100%);
    --gradient-pink: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    --gradient-white: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    --gradient-multi: linear-gradient(135deg, #ff6b6b, #feca57, #ff9ff3);
    
    /* Text Colors */
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-muted: var(--gray-500);
    --text-light: rgba(255, 255, 255, 0.9);
    --text-white: #ffffff;
    --text-brand: var(--primary-color);
    
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: var(--gray-50);
    --bg-muted: var(--gray-100);
    --bg-dark: var(--gray-800);
    
    /* Border Colors */
    --border-light: rgba(255, 255, 255, 0.1);
    --border-color: var(--gray-200);
    --border-focus: var(--primary-light);
    
    /* Special Effects */
    --shine-overlay: rgba(255, 255, 255, 0.3);
    --primary-alpha-30: rgba(59, 130, 246, 0.3);
    
    /* 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), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-focus: 0 0 0 0.2rem rgba(74, 107, 255, 0.15);
    --text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  
    /* Colored Shadows */
    --shadow-primary: rgba(59, 130, 246, 0.3);
    --shadow-secondary: rgba(139, 92, 246, 0.3);
    --shadow-success: rgba(16, 185, 129, 0.3);
    --shadow-warning: rgba(245, 158, 11, 0.3);
    --shadow-error: rgba(239, 68, 68, 0.3);
    --shadow-neutral: rgba(107, 114, 128, 0.3);
    --shadow-accent: rgba(255, 154, 158, 0.5);
    --shadow-logo: rgba(255, 107, 107, 0.5);
    --shadow-light: rgba(0, 0, 0, 0.1);
  
  /* Star Rating Shadows */
  --shadow-star: rgba(245, 158, 11, 0.3);
  --shadow-star-hover: rgba(251, 191, 36, 0.6);
  --shadow-star-hover-light: rgba(251, 191, 36, 0.4);
  --shadow-star-active: rgba(245, 158, 11, 0.8);
  --shadow-star-active-light: rgba(245, 158, 11, 0.5);
  --shadow-star-pulse-start: rgba(245, 158, 11, 0.5);
  --shadow-star-pulse-peak: rgba(245, 158, 11, 1);
  --shadow-star-pulse-peak-light: rgba(245, 158, 11, 0.7);
    
    /* Overlays */
    --overlay-primary: rgba(59, 130, 246, 0.5);
    --overlay-secondary: rgba(139, 92, 246, 0.5);
    --overlay-success: rgba(16, 185, 129, 0.5);
    --overlay-warning: rgba(245, 158, 11, 0.5);
    --overlay-error: rgba(239, 68, 68, 0.5);
    --overlay-neutral: rgba(107, 114, 128, 0.5);
    --overlay-accent: rgba(255, 154, 158, 0.5);
    --overlay-logo: rgba(255, 107, 107, 0.5);
    --overlay-light: rgba(0, 0, 0, 0.1);
}

/* Dark Theme Variables */
[data-theme="dark"] {
    --text-primary: var(--gray-100);
    --text-secondary: var(--gray-300);
    --text-muted: var(--gray-400);
    --text-light: var(--gray-500);
    --bg-primary: var(--gray-900);
    --bg-secondary: var(--gray-800);
    --bg-muted: var(--gray-700);
    --border-color: var(--gray-600);
}

/* Admin Theme Overrides */
.admin-theme {
    --primary-color: #6366f1;
    --primary-dark: #4f46e5;
    --success-color: #059669;
    --warning-color: #d97706;
}

/* High Contrast Theme */
.high-contrast {
    --primary-color: #000000;
    --text-primary: #000000;
    --bg-primary: #ffffff;
    --border-color: #000000;
}