/**
 * AliOne Enhanced Color Scheme
 * Based on Royal Purple theme with modern gradients
 * 
 * @package AliOne_Child
 * @version 2.0.0
 */

:root {
    /* Primary Purple Palette */
    --primary-dark: #0a0514;
    --primary-purple: #1a0d2e;
    --secondary-purple: #2d1b64;
    --royal-purple: #5a3ea6;
    --deep-indigo: #2d1b64;
    --accent-purple: #6b46c1;
    --light-purple: #8b5cf6;
    
    /* Accent Colors */
    --neon-cyan: #4ecdc4;
    --dark-cyan: #44a08d;
    --electric-blue: #4facfe;
    --bright-cyan: #00f2fe;
    
    /* Premium Colors */
    --golden-metallic: #FFD700;
    --golden-orange: #FFA000;
    --coral-red: #ff6b6b;
    --success-green: #4ecdc4;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--royal-purple) 0%, var(--deep-indigo) 100%);
    --gradient-accent: linear-gradient(135deg, var(--neon-cyan) 0%, var(--dark-cyan) 100%);
    --gradient-premium: linear-gradient(135deg, var(--golden-metallic) 0%, var(--golden-orange) 100%);
    --gradient-hero: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-purple) 25%, var(--secondary-purple) 75%, var(--royal-purple) 100%);
    --gradient-card: linear-gradient(135deg, var(--neon-cyan) 0%, var(--light-purple) 50%, var(--golden-metallic) 100%);
    
    /* Social Media Platform Colors */
    --instagram-gradient: linear-gradient(135deg, #E4405F 0%, #FCAF45 50%, #833AB4 100%);
    --youtube-gradient: linear-gradient(135deg, #FF0000 0%, #FF4444 100%);
    --tiktok-gradient: linear-gradient(135deg, #000000 0%, #FF0050 50%, #00F2EA 100%);
    --facebook-gradient: linear-gradient(135deg, #1877F2 0%, #42A5F5 100%);
    --twitter-gradient: linear-gradient(135deg, #1DA1F2 0%, #1976D2 100%);
    --telegram-gradient: linear-gradient(135deg, #0088CC 0%, #00ACC1 100%);
    --linkedin-gradient: linear-gradient(135deg, #0077B5 0%, #00A0DC 100%);
    --snapchat-gradient: linear-gradient(135deg, #FFFC00 0%, #FFF700 100%);
    
    /* Glass Morphism */
    --glass-bg: rgba(255, 255, 255, 0.15);
    --glass-bg-hover: rgba(255, 255, 255, 0.2);
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.85);
    --text-tertiary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
    
    /* Shadow & Effects */
    --shadow-primary: 0 10px 40px rgba(90, 62, 166, 0.3);
    --shadow-accent: 0 10px 40px rgba(78, 205, 196, 0.3);
    --shadow-premium: 0 10px 40px rgba(255, 215, 0, 0.3);
    --glow-primary: 0 0 30px rgba(90, 62, 166, 0.5);
    --glow-accent: 0 0 30px rgba(78, 205, 196, 0.5);
    --glow-premium: 0 0 30px rgba(255, 215, 0, 0.5);
    
    /* Animation Colors */
    --animate-gradient: linear-gradient(
        45deg,
        var(--neon-cyan) 0%,
        var(--light-purple) 25%,
        var(--golden-metallic) 50%,
        var(--coral-red) 75%,
        var(--neon-cyan) 100%
    );
    
    /* Status Colors */
    --success: #4ecdc4;
    --warning: #FFA000;
    --error: #ff6b6b;
    --info: #4facfe;
    
    /* Spacing & Sizing */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-xl: 24px;
    
    /* Animation Durations */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.5s;
}

/* Light Theme Variables */
[data-theme="light"] {
    --primary-dark: #f8fafc;
    --primary-purple: #ffffff;
    --secondary-purple: #f1f5f9;
    --royal-purple: #5a3ea6;
    --deep-indigo: #2d1b64;
    
    --glass-bg: rgba(0, 0, 0, 0.05);
    --glass-bg-hover: rgba(0, 0, 0, 0.1);
    --glass-border: rgba(0, 0, 0, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    
    --text-primary: #1e293b;
    --text-secondary: rgba(30, 41, 59, 0.85);
    --text-tertiary: rgba(30, 41, 59, 0.7);
    --text-muted: rgba(30, 41, 59, 0.5);
    
    --gradient-hero: linear-gradient(135deg, #f8fafc 0%, #ffffff 25%, #f1f5f9 75%, #e2e8f0 100%);
    
    --shadow-primary: 0 10px 40px rgba(90, 62, 166, 0.15);
    --shadow-accent: 0 10px 40px rgba(78, 205, 196, 0.15);
    --shadow-premium: 0 10px 40px rgba(255, 215, 0, 0.15);
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --glass-bg: rgba(255, 255, 255, 0.3);
        --glass-border: rgba(255, 255, 255, 0.4);
        --text-secondary: rgba(255, 255, 255, 0.95);
        --text-tertiary: rgba(255, 255, 255, 0.9);
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0.01s;
        --transition-normal: 0.01s;
        --transition-slow: 0.01s;
    }
}

/* Color Utility Classes */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.text-muted { color: var(--text-muted) !important; }

.bg-glass { 
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
}

.bg-gradient-primary { background: var(--gradient-primary) !important; }
.bg-gradient-accent { background: var(--gradient-accent) !important; }
.bg-gradient-premium { background: var(--gradient-premium) !important; }

.text-gradient {
    background: var(--gradient-card);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
}

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

/* Shadow Utility Classes */
.shadow-primary { box-shadow: var(--shadow-primary) !important; }
.shadow-accent { box-shadow: var(--shadow-accent) !important; }
.shadow-premium { box-shadow: var(--shadow-premium) !important; }

.glow-primary { box-shadow: var(--glow-primary) !important; }
.glow-accent { box-shadow: var(--glow-accent) !important; }
.glow-premium { box-shadow: var(--glow-premium) !important; }

/* Border Radius Utilities */
.rounded-sm { border-radius: var(--border-radius-sm) !important; }
.rounded-md { border-radius: var(--border-radius-md) !important; }
.rounded-lg { border-radius: var(--border-radius-lg) !important; }
.rounded-xl { border-radius: var(--border-radius-xl) !important; }

/* Transition Utilities */
.transition-fast { transition: all var(--transition-fast) ease !important; }
.transition-normal { transition: all var(--transition-normal) ease !important; }
.transition-slow { transition: all var(--transition-slow) ease !important; }