/* Mini Tools Theme System */

/* Base Theme Variables */
:root {
    /* Animation & Transitions */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.2s ease;
    --transition-slow: all 0.5s ease;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 50%;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.25);
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    
    /* Z-Index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 1040;
    --z-popover: 1050;
    --z-tooltip: 1060;
}

/* ================================
   THEME 1: SUNSET (Default)
   ================================ */
[data-theme="sunset"], :root {
    /* Primary Colors - Orange */
    --primary-500: #ff6b35;
    --primary-600: #e55a2b;
    --primary-700: #cc4a21;
    
    /* Secondary Colors - Pink */
    --secondary-500: #ff8a80;
    --secondary-600: #ff7043;
    --secondary-700: #ff5722;
    
    /* Accent Colors - Yellow */
    --accent-500: #ffd54f;
    --accent-600: #ffca28;
    --accent-700: #ffc107;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #ff6b35 0%, #cc4a21 100%);
    --gradient-secondary: linear-gradient(135deg, #ff8a80 0%, #ff5722 100%);
    --gradient-accent: linear-gradient(135deg, #ffd54f 0%, #ffc107 100%);
    --gradient-aurora: linear-gradient(135deg, #ff6b35 0%, #ff8a80 50%, #ffd54f 100%);
    
    /* Background */
    --bg-primary: var(--gradient-aurora);
    --bg-secondary: rgba(255, 107, 53, 0.1);
    --bg-tertiary: rgba(255, 107, 53, 0.05);
    
    /* Glass Effects */
    --glass-bg: rgba(255, 255, 255, 0.15);
    --glass-border: rgba(255, 255, 255, 0.25);
    --glass-shadow: 0 8px 32px rgba(255, 107, 53, 0.3);
    
    /* Text Colors */
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.8);
    --text-tertiary: rgba(255, 255, 255, 0.6);
    --text-inverse: rgba(0, 0, 0, 0.9);
    
    /* Status Colors */
    --success: #4caf50;
    --warning: #ff9800;
    --error: #f44336;
    --info: #2196f3;
}

/* ================================
   THEME 2: AURORA
   ================================ */
[data-theme="aurora"] {
    /* Primary Colors */
    --primary-500: #667eea;
    --primary-600: #5a67d8;
    --primary-700: #4c51bf;
    
    /* Secondary Colors */
    --secondary-500: #ec4899;
    --secondary-600: #db2777;
    --secondary-700: #be185d;
    
    /* Accent Colors */
    --accent-500: #14b8a6;
    --accent-600: #0d9488;
    --accent-700: #0f766e;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #4c51bf 100%);
    --gradient-secondary: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
    --gradient-accent: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
    --gradient-aurora: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    
    /* Background */
    --bg-primary: var(--gradient-aurora);
    --bg-secondary: rgba(255, 255, 255, 0.1);
    --bg-tertiary: rgba(255, 255, 255, 0.05);
    
    /* Glass Effects */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
    
    /* Text Colors */
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.8);
    --text-tertiary: rgba(255, 255, 255, 0.6);
    --text-inverse: rgba(0, 0, 0, 0.9);
    
    /* Status Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;
}

/* ================================
   THEME 3: CYBERPUNK
   ================================ */
[data-theme="cyberpunk"] {
    /* Primary Colors - Neon Blue */
    --primary-500: #00d4ff;
    --primary-600: #00b8e6;
    --primary-700: #0099cc;
    
    /* Secondary Colors - Neon Pink */
    --secondary-500: #ff0080;
    --secondary-600: #e6006b;
    --secondary-700: #cc0055;
    
    /* Accent Colors - Neon Green */
    --accent-500: #00ff88;
    --accent-600: #00e673;
    --accent-700: #00cc5e;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    --gradient-secondary: linear-gradient(135deg, #ff0080 0%, #cc0055 100%);
    --gradient-accent: linear-gradient(135deg, #00ff88 0%, #00cc5e 100%);
    --gradient-aurora: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
    
    /* Background */
    --bg-primary: var(--gradient-aurora);
    --bg-secondary: rgba(0, 212, 255, 0.1);
    --bg-tertiary: rgba(0, 212, 255, 0.05);
    
    /* Glass Effects */
    --glass-bg: rgba(0, 0, 0, 0.3);
    --glass-border: rgba(0, 212, 255, 0.3);
    --glass-shadow: 0 8px 32px rgba(0, 212, 255, 0.2);
    
    /* Text Colors */
    --text-primary: #00d4ff;
    --text-secondary: rgba(0, 212, 255, 0.8);
    --text-tertiary: rgba(0, 212, 255, 0.6);
    --text-inverse: #0a0a0a;
    
    /* Status Colors */
    --success: #00ff88;
    --warning: #ffaa00;
    --error: #ff0080;
    --info: #00d4ff;
}

/* Sunset theme is now the default (defined in :root above) */

/* ================================
   THEME 4: FOREST
   ================================ */
[data-theme="forest"] {
    /* Primary Colors - Green */
    --primary-500: #10b981;
    --primary-600: #059669;
    --primary-700: #047857;
    
    /* Secondary Colors - Teal */
    --secondary-500: #14b8a6;
    --secondary-600: #0d9488;
    --secondary-700: #0f766e;
    
    /* Accent Colors - Lime */
    --accent-500: #84cc16;
    --accent-600: #65a30d;
    --accent-700: #4d7c0f;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #10b981 0%, #047857 100%);
    --gradient-secondary: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
    --gradient-accent: linear-gradient(135deg, #84cc16 0%, #4d7c0f 100%);
    --gradient-aurora: linear-gradient(135deg, #064e3b 0%, #10b981 50%, #84cc16 100%);
    
    /* Background */
    --bg-primary: var(--gradient-aurora);
    --bg-secondary: rgba(16, 185, 129, 0.1);
    --bg-tertiary: rgba(16, 185, 129, 0.05);
    
    /* Glass Effects */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-shadow: 0 8px 32px rgba(16, 185, 129, 0.3);
    
    /* Text Colors */
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.8);
    --text-tertiary: rgba(255, 255, 255, 0.6);
    --text-inverse: rgba(0, 0, 0, 0.9);
    
    /* Status Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #06b6d4;
}

/* ================================
   THEME 5: OCEAN
   ================================ */
[data-theme="ocean"] {
    /* Primary Colors - Blue */
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    
    /* Secondary Colors - Cyan */
    --secondary-500: #06b6d4;
    --secondary-600: #0891b2;
    --secondary-700: #0e7490;
    
    /* Accent Colors - Indigo */
    --accent-500: #6366f1;
    --accent-600: #4f46e5;
    --accent-700: #4338ca;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    --gradient-secondary: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);
    --gradient-accent: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
    --gradient-aurora: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #06b6d4 100%);
    
    /* Background */
    --bg-primary: var(--gradient-aurora);
    --bg-secondary: rgba(59, 130, 246, 0.1);
    --bg-tertiary: rgba(59, 130, 246, 0.05);
    
    /* Glass Effects */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-shadow: 0 8px 32px rgba(59, 130, 246, 0.3);
    
    /* Text Colors */
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.8);
    --text-tertiary: rgba(255, 255, 255, 0.6);
    --text-inverse: rgba(0, 0, 0, 0.9);
    
    /* Status Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;
}

/* ================================
   THEME 6: DARK MINIMAL
   ================================ */
[data-theme="dark"] {
    /* Primary Colors - Gray */
    --primary-500: #6b7280;
    --primary-600: #4b5563;
    --primary-700: #374151;
    
    /* Secondary Colors - Slate */
    --secondary-500: #64748b;
    --secondary-600: #475569;
    --secondary-700: #334155;
    
    /* Accent Colors - White */
    --accent-500: #f8fafc;
    --accent-600: #f1f5f9;
    --accent-700: #e2e8f0;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #6b7280 0%, #374151 100%);
    --gradient-secondary: linear-gradient(135deg, #64748b 0%, #334155 100%);
    --gradient-accent: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    --gradient-aurora: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    
    /* Background */
    --bg-primary: var(--gradient-aurora);
    --bg-secondary: rgba(255, 255, 255, 0.05);
    --bg-tertiary: rgba(255, 255, 255, 0.02);
    
    /* Glass Effects */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    
    /* Text Colors */
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-tertiary: rgba(255, 255, 255, 0.5);
    --text-inverse: rgba(0, 0, 0, 0.9);
    
    /* Status Colors */
    --success: #22c55e;
    --warning: #eab308;
    --error: #ef4444;
    --info: #3b82f6;
}

/* ================================
   THEME ANIMATIONS
   ================================ */
.theme-transition {
    transition: 
        background var(--transition-slow),
        color var(--transition-slow),
        border-color var(--transition-slow),
        box-shadow var(--transition-slow);
}

/* Theme-specific animations */
[data-theme="cyberpunk"] .card:hover {
    box-shadow: 
        var(--glass-shadow),
        0 0 20px rgba(0, 212, 255, 0.3),
        inset 0 0 20px rgba(0, 212, 255, 0.1);
}

[data-theme="sunset"] .card:hover {
    box-shadow: 
        var(--glass-shadow),
        0 0 20px rgba(255, 107, 53, 0.4);
}

[data-theme="forest"] .card:hover {
    box-shadow: 
        var(--glass-shadow),
        0 0 20px rgba(16, 185, 129, 0.3);
}

[data-theme="ocean"] .card:hover {
    box-shadow: 
        var(--glass-shadow),
        0 0 20px rgba(59, 130, 246, 0.3);
}

/* Theme-specific particle effects */
[data-theme="cyberpunk"] .particle {
    background: radial-gradient(circle, var(--primary-500) 0%, transparent 70%);
}

[data-theme="sunset"] .particle {
    background: radial-gradient(circle, var(--accent-500) 0%, transparent 70%);
}

[data-theme="forest"] .particle {
    background: radial-gradient(circle, var(--primary-500) 0%, transparent 70%);
}

[data-theme="ocean"] .particle {
    background: radial-gradient(circle, var(--secondary-500) 0%, transparent 70%);
}

/* Responsive theme adjustments */
@media (max-width: 768px) {
    :root {
        --glass-shadow: 0 4px 16px rgba(31, 38, 135, 0.2);
    }
    
    [data-theme="cyberpunk"] {
        --glass-shadow: 0 4px 16px rgba(0, 212, 255, 0.15);
    }
}