/**
 * CorridorOS Photonic Light Theme
 * 
 * A stunning light theme inspired by photonic technology and light corridors.
 * Features elegant gradients, subtle animations, and a sophisticated color palette
 * that creates a sense of depth and technological advancement.
 */

/* Photonic Light Theme Variables */
:root[data-theme="photonic-light"] {
    /* Photonic Color Palette */
    --photonic-primary: #00d4ff;
    --photonic-secondary: #7c3aed;
    --photonic-accent: #f59e0b;
    --photonic-glow: #06b6d4;
    
    /* Background Gradients */
    --bg-photonic-primary: linear-gradient(135deg, 
        #f8fafc 0%, 
        #e2e8f0 15%, 
        #cbd5e1 30%, 
        #e2e8f0 45%, 
        #f1f5f9 60%, 
        #e2e8f0 75%, 
        #cbd5e1 90%, 
        #f8fafc 100%);
    
    --bg-photonic-secondary: linear-gradient(135deg, 
        #ffffff 0%, 
        #f8fafc 25%, 
        #f1f5f9 50%, 
        #e2e8f0 75%, 
        #ffffff 100%);
    
    --bg-photonic-glass: rgba(255, 255, 255, 0.85);
    --bg-photonic-glass-hover: rgba(255, 255, 255, 0.95);
    
    /* Text Colors */
    --text-photonic-primary: #0f172a;
    --text-photonic-secondary: #334155;
    --text-photonic-tertiary: #64748b;
    --text-photonic-accent: #00d4ff;
    
    /* Border and Shadow */
    --border-photonic: rgba(0, 212, 255, 0.2);
    --shadow-photonic-small: 0 2px 8px rgba(0, 212, 255, 0.1);
    --shadow-photonic-medium: 0 8px 28px rgba(0, 212, 255, 0.15);
    --shadow-photonic-large: 0 16px 48px rgba(0, 212, 255, 0.2);
    
    /* Photonic Glow Effects */
    --glow-photonic-primary: 0 0 20px rgba(0, 212, 255, 0.3);
    --glow-photonic-secondary: 0 0 20px rgba(124, 58, 237, 0.2);
    --glow-photonic-accent: 0 0 20px rgba(245, 158, 11, 0.2);
    
    /* Animation Variables */
    --photonic-pulse: photonic-pulse 3s ease-in-out infinite;
    --photonic-float: photonic-float 4s ease-in-out infinite;
    --photonic-glow: photonic-glow 2s ease-in-out infinite alternate;
}

/* Photonic Light Theme Base Styles */
[data-theme="photonic-light"] body {
    background: var(--bg-photonic-primary);
    color: var(--text-photonic-primary);
    position: relative;
    overflow-x: hidden;
}

/* Photonic Background with Animated Elements */
[data-theme="photonic-light"] .desktop-background {
    background: var(--bg-photonic-primary);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* Photonic Animated Background Elements */
[data-theme="photonic-light"] .desktop-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(124, 58, 237, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 60%, rgba(245, 158, 11, 0.06) 0%, transparent 50%);
    animation: var(--photonic-float);
}

[data-theme="photonic-light"] .desktop-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(45deg, transparent 30%, rgba(0, 212, 255, 0.03) 50%, transparent 70%),
        linear-gradient(-45deg, transparent 30%, rgba(124, 58, 237, 0.02) 50%, transparent 70%);
    animation: var(--photonic-pulse);
}

/* Photonic Panel Styles */
[data-theme="photonic-light"] .top-panel {
    background: var(--bg-photonic-glass);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-photonic);
    box-shadow: var(--shadow-photonic-small);
}

[data-theme="photonic-light"] .panel-button {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--border-photonic);
    color: var(--text-photonic-primary);
    transition: all 0.3s ease;
}

[data-theme="photonic-light"] .panel-button:hover {
    background: var(--bg-photonic-glass-hover);
    box-shadow: var(--glow-photonic-primary);
    transform: translateY(-1px);
}

/* Photonic Dock Styles */
[data-theme="photonic-light"] .dock {
    background: var(--bg-photonic-glass);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-photonic);
    box-shadow: var(--shadow-photonic-medium);
}

[data-theme="photonic-light"] .dock-app {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--border-photonic);
    transition: all 0.3s ease;
}

[data-theme="photonic-light"] .dock-app:hover {
    background: var(--bg-photonic-glass-hover);
    box-shadow: var(--glow-photonic-primary);
    transform: translateY(-3px) scale(1.05);
}

/* Photonic Window Styles */
[data-theme="photonic-light"] .window {
    background: var(--bg-photonic-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-photonic);
    box-shadow: var(--shadow-photonic-medium);
    color: var(--text-photonic-primary);
}

[data-theme="photonic-light"] .window-header {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(248, 250, 252, 0.8) 100%);
    border-bottom: 1px solid var(--border-photonic);
    color: var(--text-photonic-primary);
}

/* Photonic App Grid Styles */
[data-theme="photonic-light"] .app-item {
    background: var(--bg-photonic-glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-photonic);
    transition: all 0.3s ease;
}

[data-theme="photonic-light"] .app-item:hover {
    background: var(--bg-photonic-glass-hover);
    box-shadow: var(--glow-photonic-primary);
    transform: translateY(-2px) scale(1.02);
}

/* Photonic Boot Splash Styles */
[data-theme="photonic-light"] .boot-splash {
    background: var(--bg-photonic-primary);
    position: relative;
    overflow: hidden;
}

[data-theme="photonic-light"] .boot-splash::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 30% 30%, rgba(0, 212, 255, 0.15) 0%, transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(124, 58, 237, 0.1) 0%, transparent 60%);
    animation: var(--photonic-pulse);
}

[data-theme="photonic-light"] .boot-logo {
    position: relative;
    z-index: 2;
}

[data-theme="photonic-light"] .boot-ring {
    filter: drop-shadow(var(--glow-photonic-primary));
}

[data-theme="photonic-light"] .boot-ring-fill {
    stroke: url(#photonicGradient);
    stroke-dasharray: 326.73 326.73;
    stroke-dashoffset: 326.73;
    transition: stroke-dashoffset 0.5s ease;
}

/* Photonic Gradient Definitions */
[data-theme="photonic-light"] #photonicGradient stop:nth-child(1) {
    stop-color: var(--photonic-primary);
}

[data-theme="photonic-light"] #photonicGradient stop:nth-child(2) {
    stop-color: var(--photonic-secondary);
}

[data-theme="photonic-light"] #photonicGradient stop:nth-child(3) {
    stop-color: var(--photonic-accent);
}

/* Photonic Animations */
@keyframes photonic-pulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes photonic-float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    33% {
        transform: translateY(-10px) rotate(1deg);
    }
    66% {
        transform: translateY(5px) rotate(-1deg);
    }
}

@keyframes photonic-glow {
    0% {
        box-shadow: var(--glow-photonic-primary);
    }
    100% {
        box-shadow: var(--glow-photonic-secondary);
    }
}

/* Photonic Notifications */
[data-theme="photonic-light"] .notification {
    background: var(--bg-photonic-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-photonic);
    box-shadow: var(--shadow-photonic-medium);
    color: var(--text-photonic-primary);
}

/* Photonic Activities Overview */
[data-theme="photonic-light"] .activities-overview {
    background: var(--bg-photonic-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-photonic);
    box-shadow: var(--shadow-photonic-large);
}

/* Photonic Search Input */
[data-theme="photonic-light"] #app-search {
    background: var(--bg-photonic-glass);
    border: 1px solid var(--border-photonic);
    color: var(--text-photonic-primary);
    backdrop-filter: blur(10px);
}

[data-theme="photonic-light"] #app-search:focus {
    box-shadow: var(--glow-photonic-primary);
    border-color: var(--photonic-primary);
}

/* Photonic Desktop Icons */
[data-theme="photonic-light"] .desktop-icon {
    background: var(--bg-photonic-glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-photonic);
    transition: all 0.3s ease;
}

[data-theme="photonic-light"] .desktop-icon:hover {
    background: var(--bg-photonic-glass-hover);
    box-shadow: var(--glow-photonic-primary);
    transform: translateY(-2px);
}

/* Photonic Context Menu */
[data-theme="photonic-light"] .context-menu {
    background: var(--bg-photonic-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-photonic);
    box-shadow: var(--shadow-photonic-medium);
    color: var(--text-photonic-primary);
}

[data-theme="photonic-light"] .menu-item {
    color: var(--text-photonic-primary);
    transition: all 0.2s ease;
}

[data-theme="photonic-light"] .menu-item:hover {
    background: rgba(0, 212, 255, 0.1);
    color: var(--photonic-primary);
}

/* Photonic Lock Screen */
[data-theme="photonic-light"] .lock-screen {
    background: var(--bg-photonic-primary);
}

[data-theme="photonic-light"] .lock-content {
    background: var(--bg-photonic-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-photonic);
    box-shadow: var(--shadow-photonic-large);
    color: var(--text-photonic-primary);
}

/* Photonic Progress Ring */
[data-theme="photonic-light"] .boot-progress-fill {
    stroke: url(#photonicGradient);
    filter: drop-shadow(var(--glow-photonic-primary));
}

/* Photonic Status Icons */
[data-theme="photonic-light"] .panel-button .icon {
    filter: drop-shadow(0 0 3px rgba(0, 212, 255, 0.3));
}

/* Photonic Mobile Adaptations */
@media (max-width: 768px) {
    [data-theme="photonic-light"] .desktop-background::before,
    [data-theme="photonic-light"] .desktop-background::after {
        animation-duration: 6s;
    }
    
    [data-theme="photonic-light"] .dock-app:hover {
        transform: translateY(-2px) scale(1.03);
    }
}

/* Photonic Pre-boot Animation */
[data-theme="photonic-light"] .pre-boot-photonic {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-photonic-primary);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    animation: photonic-fade-in 1s ease-out;
}

[data-theme="photonic-light"] .pre-boot-photonic::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 25% 25%, rgba(0, 212, 255, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(124, 58, 237, 0.15) 0%, transparent 50%);
    animation: var(--photonic-pulse);
}

@keyframes photonic-fade-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Photonic Loading Spinner */
[data-theme="photonic-light"] .photonic-spinner {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(0, 212, 255, 0.2);
    border-top: 3px solid var(--photonic-primary);
    border-radius: 50%;
    animation: photonic-spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes photonic-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Photonic Loading Text */
[data-theme="photonic-light"] .photonic-loading-text {
    color: var(--text-photonic-primary);
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    animation: var(--photonic-float);
}

[data-theme="photonic-light"] .photonic-loading-text::after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 20px;
    background: var(--photonic-primary);
    margin-left: 5px;
    animation: photonic-blink 1s infinite;
}

@keyframes photonic-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}