/* Theme Variables */
:root {
    /* Dark Theme */
    --dark-primary: #4361ee;
    --dark-secondary: #3a0ca3;
    --dark-accent: #4cc9f0;
    --dark-bg: #0a0e17;
    --dark-surface: #1a1f35;
    --dark-text: #ffffff;
    --dark-text-secondary: rgba(255, 255, 255, 0.7);
    --dark-glass: rgba(255, 255, 255, 0.1);
    --dark-border: rgba(255, 255, 255, 0.2);
    --dark-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    
    /* Light Theme */
    --light-primary: #4361ee;
    --light-secondary: #3a0ca3;
    --light-accent: #4cc9f0;
    --light-bg: #f8f9fa;
    --light-surface: #ffffff;
    --light-text: #212529;
    --light-text-secondary: rgba(0, 0, 0, 0.6);
    --light-glass: rgba(255, 255, 255, 0.7);
    --light-border: rgba(0, 0, 0, 0.1);
    --light-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Apply Dark Theme (Default) */
body:not(.light-mode) {
    --primary-blue: var(--dark-primary);
    --secondary-blue: var(--dark-secondary);
    --accent-blue: var(--dark-accent);
    --background: var(--dark-bg);
    --surface: var(--dark-surface);
    --text-color: var(--dark-text);
    --text-secondary: var(--dark-text-secondary);
    --glass-bg: var(--dark-glass);
    --glass-border: var(--dark-border);
    --shadow: var(--dark-shadow);
    
    background: linear-gradient(135deg, var(--background) 0%, var(--surface) 100%);
    color: var(--text-color);
}

/* Apply Light Theme */
body.light-mode {
    --primary-blue: var(--light-primary);
    --secondary-blue: var(--light-secondary);
    --accent-blue: var(--light-accent);
    --background: var(--light-bg);
    --surface: var(--light-surface);
    --text-color: var(--light-text);
    --text-secondary: var(--light-text-secondary);
    --glass-bg: var(--light-glass);
    --glass-border: var(--light-border);
    --shadow: var(--light-shadow);
    
    background: linear-gradient(135deg, var(--background) 0%, var(--surface) 100%);
    color: var(--text-color);
}

/* Theme-specific overrides */
.light-mode .glass {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
}

.light-mode .nav-links a,
.light-mode .btn-secondary {
    color: var(--text-color);
}

.light-mode .section-subtitle,
.light-mode .upload-subtext,
.light-mode .preset-desc {
    color: var(--text-secondary);
}

.light-mode .upload-zone {
    border-color: var(--glass-border);
}

.light-mode .upload-zone:hover,
.light-mode .upload-zone.dragover {
    border-color: var(--accent-blue);
    background: rgba(76, 201, 240, 0.1);
}

.light-mode .preset-btn,
.light-mode .progress-item,
.light-mode .stat-card:not(.highlight),
.light-mode .file-item {
    background: var(--glass-bg);
    border-color: var(--glass-border);
}

.light-mode .format-option {
    background: rgba(0, 0, 0, 0.05);
}

.light-mode .format-option:hover {
    background: rgba(0, 0, 0, 0.1);
}

.light-mode .progress-bar {
    background: var(--glass-bg);
}

.light-mode .preview-image {
    background: var(--glass-bg);
}

.light-mode .faq-item {
    border-color: var(--glass-border);
}

.light-mode .footer-section a,
.light-mode .footer-section span {
    color: var(--text-secondary);
}

.light-mode .footer-bottom {
    border-color: var(--glass-border);
}

.light-mode .mobile-menu-btn span {
    background: var(--text-color);
}

/* Theme Transition */
body,
.glass,
.btn,
.preset-btn,
.format-option,
.stat-card,
.faq-item,
.feature-card {
    transition: background-color 0.3s ease, 
                border-color 0.3s ease, 
                color 0.3s ease,
                transform 0.3s ease;
}

/* Theme Toggle Animation */
.theme-toggle {
    transition: all 0.3s ease;
}

.theme-toggle::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--text-color);
    left: 2px;
    top: 2px;
    transition: transform 0.3s ease;
}

.light-mode .theme-toggle::before {
    transform: translateX(24px);
}

/* Theme-specific text gradients */
.light-mode .logo h1,
.light-mode .section-title {
    background: linear-gradient(45deg, var(--primary-blue), var(--accent-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Theme-specific shadows */
.light-mode .btn-primary:hover,
.light-mode .preset-btn.active {
    box-shadow: 0 10px 25px rgba(67, 97, 238, 0.3);
}

/* Theme-specific glow effects */
.light-mode .btn-glow {
    animation: pulse-light 2s infinite;
}

@keyframes pulse-light {
    0%, 100% { box-shadow: 0 0 20px rgba(67, 97, 238, 0.3); }
    50% { box-shadow: 0 0 30px rgba(67, 97, 238, 0.5); }
}

/* Theme-specific placeholder text */
.light-mode ::placeholder {
    color: var(--text-secondary);
}

/* Theme-specific scrollbar */
.light-mode ::-webkit-scrollbar {
    width: 10px;
}

.light-mode ::-webkit-scrollbar-track {
    background: var(--glass-bg);
}

.light-mode ::-webkit-scrollbar-thumb {
    background: var(--primary-blue);
    border-radius: 5px;
}

.light-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-blue);
}