/* Enhanced Themes with Subtle Background Depth */
/* Premium visual enhancement system for boundary reinforcement app */

:root {
    /* Enhanced Background Depth System */
    --depth-layer-1: rgba(255, 255, 255, 0.02);
    --depth-layer-2: rgba(255, 255, 255, 0.04);
    --depth-layer-3: rgba(255, 255, 255, 0.06);
    --depth-shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.1);
    --depth-shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.15);
    --depth-shadow-strong: 0 12px 40px rgba(0, 0, 0, 0.2);
    
    /* Glass Morphism Enhancement */
    --glass-blur: blur(20px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
    --glass-background: rgba(255, 255, 255, 0.05);
}

/* === PEACE & CALM THEME === */
.theme-peace-calm {
    --bg-primary: linear-gradient(135deg, #1e1b4b 0%, #312e81 25%, #1e1b4b 50%, #0f172a 100%);
    --bg-secondary: linear-gradient(135deg, #312e81 0%, #1e293b 50%, #312e81 100%);
    --bg-tertiary: rgba(30, 27, 75, 0.6);
    --surface-depth: 
        linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
    --card-depth: 
        linear-gradient(145deg, rgba(99, 102, 241, 0.1) 0%, rgba(30, 27, 75, 0.4) 100%);
    --accent-glow: 0 4px 20px rgba(99, 102, 241, 0.15);
    --text-glow: none;
}

/* === OCEAN BREEZE THEME === */
.theme-ocean-breeze {
    --bg-primary: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #0369a1 50%, #0f172a 100%);
    --bg-secondary: linear-gradient(135deg, #1e293b 0%, #0c4a6e 50%, #1e293b 100%);
    --bg-tertiary: rgba(14, 165, 233, 0.6);
    --surface-depth: 
        linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(2, 132, 199, 0.05) 100%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
    --card-depth: 
        linear-gradient(145deg, rgba(14, 165, 233, 0.1) 0%, rgba(15, 23, 42, 0.4) 100%);
    --accent-glow: 0 4px 20px rgba(14, 165, 233, 0.15);
    --text-glow: none;
}

/* === SUNSET GLOW THEME === */
.theme-sunset-glow {
    --bg-primary: linear-gradient(135deg, #1c1917 0%, #292524 25%, #ea580c 50%, #1c1917 100%);
    --bg-secondary: linear-gradient(135deg, #292524 0%, #dc2626 50%, #292524 100%);
    --bg-tertiary: rgba(249, 115, 22, 0.6);
    --surface-depth: 
        linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, rgba(245, 158, 11, 0.05) 100%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
    --card-depth: 
        linear-gradient(145deg, rgba(249, 115, 22, 0.1) 0%, rgba(28, 25, 23, 0.4) 100%);
    --accent-glow: 0 4px 20px rgba(249, 115, 22, 0.15);
    --text-glow: none;
}

/* === FOREST ZEN THEME === */
.theme-forest-zen {
    --bg-primary: linear-gradient(135deg, #14532d 0%, #166534 25%, #059669 50%, #14532d 100%);
    --bg-secondary: linear-gradient(135deg, #166534 0%, #047857 50%, #166534 100%);
    --bg-tertiary: rgba(16, 185, 129, 0.6);
    --surface-depth: 
        linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.05) 100%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
    --card-depth: 
        linear-gradient(145deg, rgba(16, 185, 129, 0.1) 0%, rgba(20, 83, 45, 0.4) 100%);
    --accent-glow: 0 4px 20px rgba(16, 185, 129, 0.15);
    --text-glow: none;
}

/* === MIDNIGHT FOCUS THEME === */
.theme-midnight-focus {
    --bg-primary: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #3b82f6 50%, #0f172a 100%);
    --bg-secondary: linear-gradient(135deg, #1e293b 0%, #1d4ed8 50%, #1e293b 100%);
    --bg-tertiary: rgba(59, 130, 246, 0.6);
    --surface-depth: 
        linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(37, 99, 235, 0.05) 100%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
    --card-depth: 
        linear-gradient(145deg, rgba(59, 130, 246, 0.1) 0%, rgba(15, 23, 42, 0.4) 100%);
    --accent-glow: 0 4px 20px rgba(59, 130, 246, 0.15);
    --text-glow: none;
}

/* === SAKURA DREAMS THEME === */
.theme-sakura-dreams {
    --bg-primary: linear-gradient(135deg, #1e1b4b 0%, #312e81 25%, #ec4899 50%, #1e1b4b 100%);
    --bg-secondary: linear-gradient(135deg, #312e81 0%, #be185d 50%, #312e81 100%);
    --bg-tertiary: rgba(236, 72, 153, 0.6);
    --surface-depth: 
        linear-gradient(135deg, rgba(236, 72, 153, 0.08) 0%, rgba(244, 114, 182, 0.05) 100%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
    --card-depth: 
        linear-gradient(145deg, rgba(236, 72, 153, 0.1) 0%, rgba(30, 27, 75, 0.4) 100%);
    --accent-glow: 0 4px 20px rgba(236, 72, 153, 0.15);
    --text-glow: none;
}

/* === CORAL REEF THEME === */
.theme-coral-reef {
    --bg-primary: linear-gradient(135deg, #0c4a6e 0%, #0891b2 25%, #f97316 50%, #0c4a6e 100%);
    --bg-secondary: linear-gradient(135deg, #0891b2 0%, #06b6d4 50%, #0891b2 100%);
    --bg-tertiary: rgba(6, 182, 212, 0.6);
    --surface-depth: 
        linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(249, 115, 22, 0.08) 100%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
    --card-depth: 
        linear-gradient(145deg, rgba(6, 182, 212, 0.15) 0%, rgba(12, 74, 110, 0.4) 100%);
    --accent-glow: 0 4px 20px rgba(6, 182, 212, 0.2);
    --text-glow: none;
}

/* === COSMIC PURPLE THEME === */
.theme-cosmic-purple {
    --bg-primary: linear-gradient(135deg, #581c87 0%, #7c3aed 25%, #c084fc 50%, #581c87 100%);
    --bg-secondary: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #7c3aed 100%);
    --bg-tertiary: rgba(168, 85, 247, 0.6);
    --surface-depth: 
        linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(192, 132, 252, 0.08) 100%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
    --card-depth: 
        linear-gradient(145deg, rgba(168, 85, 247, 0.15) 0%, rgba(88, 28, 135, 0.4) 100%);
    --accent-glow: 0 4px 20px rgba(168, 85, 247, 0.2);
    --text-glow: none;
}

/* === GOLDEN HOUR THEME === */
.theme-golden-hour {
    --bg-primary: linear-gradient(135deg, #78350f 0%, #f59e0b 25%, #fbbf24 50%, #78350f 100%);
    --bg-secondary: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #f59e0b 100%);
    --bg-tertiary: rgba(251, 191, 36, 0.6);
    --surface-depth: 
        linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, rgba(245, 158, 11, 0.08) 100%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
    --card-depth: 
        linear-gradient(145deg, rgba(251, 191, 36, 0.15) 0%, rgba(120, 53, 15, 0.4) 100%);
    --accent-glow: 0 4px 20px rgba(251, 191, 36, 0.2);
    --text-glow: none;
}

/* === EMERALD CITY THEME === */
.theme-emerald-city {
    --bg-primary: linear-gradient(135deg, #064e3b 0%, #059669 25%, #10b981 50%, #064e3b 100%);
    --bg-secondary: linear-gradient(135deg, #059669 0%, #10b981 50%, #059669 100%);
    --bg-tertiary: rgba(16, 185, 129, 0.6);
    --surface-depth: 
        linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(52, 211, 153, 0.08) 100%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
    --card-depth: 
        linear-gradient(145deg, rgba(16, 185, 129, 0.15) 0%, rgba(6, 78, 59, 0.4) 100%);
    --accent-glow: 0 4px 20px rgba(16, 185, 129, 0.2);
    --text-glow: none;
}

/* === NEON NIGHTS THEME === */
.theme-neon-nights {
    --bg-primary: linear-gradient(135deg, #1f2937 0%, #374151 25%, #ec4899 50%, #1f2937 100%);
    --bg-secondary: linear-gradient(135deg, #374151 0%, #6b7280 50%, #374151 100%);
    --bg-tertiary: rgba(236, 72, 153, 0.6);
    --surface-depth: 
        linear-gradient(135deg, rgba(236, 72, 153, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
    --card-depth: 
        linear-gradient(145deg, rgba(236, 72, 153, 0.15) 0%, rgba(31, 41, 55, 0.4) 100%);
    --accent-glow: 0 4px 20px rgba(236, 72, 153, 0.2);
    --text-glow: none;
}

/* === ROYAL BLUE THEME === */
.theme-royal-blue {
    --bg-primary: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 25%, #60a5fa 50%, #1e3a8a 100%);
    --bg-secondary: linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #3b82f6 100%);
    --bg-tertiary: rgba(96, 165, 250, 0.6);
    --surface-depth: 
        linear-gradient(135deg, rgba(96, 165, 250, 0.12) 0%, rgba(59, 130, 246, 0.08) 100%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
    --card-depth: 
        linear-gradient(145deg, rgba(96, 165, 250, 0.15) 0%, rgba(30, 58, 138, 0.4) 100%);
    --accent-glow: 0 4px 20px rgba(96, 165, 250, 0.2);
    --text-glow: none;
}

/* === ENHANCED DEPTH APPLICATION === */

/* Main body background with depth */
body {
    background: var(--bg-primary);
    background-attachment: fixed;
    position: relative;
}

/* Layered depth overlay with animated particles */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.01) 0%, transparent 70%),
        radial-gradient(circle at 10% 90%, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 80px 80px, 120px 120px;
    animation: floatingOrbs 20s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

/* Animated floating orbs */
@keyframes floatingOrbs {
    0%, 100% { 
        background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 100% 100%;
        opacity: 0.8;
    }
    25% { 
        background-position: 30% 20%, 10% 30%, 20% 10%, 20% 20%, 80% 80%;
        opacity: 1;
    }
    50% { 
        background-position: 70% 80%, 80% 70%, 60% 90%, 40% 40%, 60% 40%;
        opacity: 0.9;
    }
    75% { 
        background-position: 20% 60%, 60% 20%, 80% 30%, 60% 60%, 40% 60%;
        opacity: 1;
    }
}

/* Enhanced cards with depth and subtle animations */
.card, .stat-card, .badge-card, .refusals-card, .feature-card {
    background: var(--card-depth) !important;
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: 
        var(--depth-shadow-medium),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Subtle breathing animation for cards */
.card, .stat-card, .badge-card, .refusals-card, .feature-card {
    animation: cardBreathe 8s ease-in-out infinite;
}

@keyframes cardBreathe {
    0%, 100% { 
        transform: translateY(0px) scale(1);
        box-shadow: 
            var(--depth-shadow-medium),
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            0 0 0 1px rgba(255, 255, 255, 0.05);
    }
    50% { 
        transform: translateY(-1px) scale(1.002);
        box-shadow: 
            var(--depth-shadow-strong),
            inset 0 1px 0 rgba(255, 255, 255, 0.12),
            0 0 0 1px rgba(255, 255, 255, 0.08);
    }
}

/* Card depth enhancement on hover */
.card:hover, .stat-card:hover, .badge-card:hover, .refusals-card:hover, .feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 
        var(--depth-shadow-strong),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Premium depth effects for buttons with pulse animation */
.btn-primary, .cta-button, .btn-premium {
    background: var(--surface-depth);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: 
        var(--depth-shadow-medium);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Gentle pulse for primary CTA buttons */
.cta-primary, .btn-premium {
    animation: ctaPulse 3s ease-in-out infinite;
}

@keyframes ctaPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: var(--depth-shadow-medium);
    }
    50% { 
        transform: scale(1.02);
        box-shadow: var(--depth-shadow-strong);
    }
}

.btn-primary:hover, .cta-button:hover, .btn-premium:hover {
    transform: translateY(-1px);
    box-shadow: 
        var(--depth-shadow-strong),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Header depth enhancement */
.main-header, .landing-header {
    background: var(--bg-secondary);
    backdrop-filter: var(--glass-blur);
    border-bottom: var(--glass-border);
    box-shadow: var(--depth-shadow-subtle);
}

/* Removed text glow effects to reduce eye strain */

/* Enhanced floating elements */
.floating-element, .achievement-badge, .streak-counter {
    background: var(--surface-depth);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: 
        var(--depth-shadow-medium);
}

/* Subtle animation for depth perception */
@keyframes floatingDepth {
    0%, 100% { 
        transform: translateY(0px) rotateX(0deg);
        box-shadow: var(--depth-shadow-medium);
    }
    50% { 
        transform: translateY(-3px) rotateX(1deg);
        box-shadow: var(--depth-shadow-strong);
    }
}

.depth-float {
    animation: floatingDepth 6s ease-in-out infinite;
}

/* Enhanced glass morphism for modals */
.modal-content, .demo-modal .demo-content {
    background: var(--card-depth);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: 
        var(--depth-shadow-strong),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Depth-aware responsive design */
@media (max-width: 768px) {
    /* Reduce depth effects on mobile for performance */
    body::before {
        background: 
            radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02) 0%, transparent 70%);
    }
    
    .card, .stat-card, .badge-card, .refusals-card, .feature-card {
        box-shadow: var(--depth-shadow-subtle);
    }
    
    .card:hover, .stat-card:hover, .badge-card:hover, .refusals-card:hover, .feature-card:hover {
        box-shadow: var(--depth-shadow-medium);
    }
}

/* Accessibility: Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .depth-float {
        animation: none;
    }
    
    .card:hover, .stat-card:hover, .badge-card:hover, .refusals-card:hover, .feature-card:hover {
        transform: none;
    }
    
    .btn-primary:hover, .cta-button:hover, .btn-premium:hover {
        transform: none;
    }
}