/* Themes CSS - Theme variables and dark mode specific styles */

/* Theme transition animations */
html,
body,
.theme-toggle,
.reset-button,
.saved-indicator,
.resizable-container,
img {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease, 
                box-shadow 0.3s ease;
}

/* Dark theme (default) */
:root {
    --theme-name: 'dark';
    
    /* Background colors */
    --bg-primary: #0c0c0c;
    --bg-secondary: #1a1a1a;
    --bg-gradient: linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 100%);
    
    /* Text colors */
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-muted: #808080;
    
    /* Border and shadow colors */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-hover: rgba(255, 255, 255, 0.2);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-light: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-medium: 0 12px 48px rgba(0, 0, 0, 0.7);
    --shadow-heavy: 0 16px 64px rgba(0, 0, 0, 0.8);
    
    /* Glass morphism colors */
    --glass-bg: rgba(0, 0, 0, 0.3);
    
    /* Link card colors */
    --link-card-bg: #2a2a2a;
    --link-card-text-primary: #e0e0e0;
    --link-card-text-secondary: #8b9cf7;
    --link-card-text-muted: #b0b0b0;
    --link-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    --link-card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.6);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-hover: rgba(0, 0, 0, 0.4);
    --glass-active: rgba(0, 0, 0, 0.5);
    
    /* Interactive colors */
    --accent-primary: #64AAFF;
    --accent-secondary: #22C55E;
    --accent-warning: #FF9800;
    --accent-error: #F87171;
    
    /* Scrollbar colors */
    --scrollbar-track: transparent;
    --scrollbar-thumb: rgba(255, 255, 255, 0.2);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
}

/* Light theme */
[data-theme="light"],
.light-mode,
html.light-mode {
    --theme-name: 'light';
    
    /* Background colors */
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --bg-gradient: linear-gradient(135deg, #f5f5f5 0%, #f5f5f5 100%);
    
    /* Text colors */
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #999999;
    
    /* Border and shadow colors */
    --border-color: rgba(0, 0, 0, 0.05);
    --border-hover: rgba(0, 0, 0, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-light: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-medium: 0 8px 32px rgba(0, 0, 0, 0.2);
    --shadow-heavy: 0 12px 48px rgba(0, 0, 0, 0.25);
    
    /* Glass morphism colors */
    --glass-bg: rgba(255, 255, 255, 0.15);
    
    /* Link card colors */
    --link-card-bg: #ffffff;
    --link-card-text-primary: #1a1a1a;
    --link-card-text-secondary: #667eea;
    --link-card-text-muted: #666666;
    --link-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    --link-card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.25);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-hover: rgba(255, 255, 255, 0.25);
    --glass-active: rgba(255, 255, 255, 0.35);
    
    /* Interactive colors */
    --accent-primary: #4A90E2;
    --accent-secondary: #50C878;
    --accent-warning: #FF5722;
    --accent-error: #EF4444;
    
    /* Scrollbar colors */
    --scrollbar-track: transparent;
    --scrollbar-thumb: rgba(0, 0, 0, 0.2);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
}

/* Theme-specific component overrides */

/* Enhanced image styling for light mode */
[data-theme="light"] img,
.light-mode img,
html.light-mode img {
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

/* Theme toggle icon styles */
.theme-icon-sun {
    display: none;
}

.theme-icon-moon {
    display: block;
}

[data-theme="light"] .theme-icon-sun,
.light-mode .theme-icon-sun,
html.light-mode .theme-icon-sun {
    display: block;
}

[data-theme="light"] .theme-icon-moon,
.light-mode .theme-icon-moon,
html.light-mode .theme-icon-moon {
    display: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --border-color: rgba(255, 255, 255, 0.3);
        --shadow-light: 0 8px 32px rgba(0, 0, 0, 0.8);
        --glass-bg: rgba(0, 0, 0, 0.5);
        --glass-border: rgba(255, 255, 255, 0.3);
    }
    
    [data-theme="light"] {
        --border-color: rgba(0, 0, 0, 0.3);
        --shadow-light: 0 4px 20px rgba(0, 0, 0, 0.4);
        --glass-bg: rgba(255, 255, 255, 0.3);
        --glass-border: rgba(0, 0, 0, 0.3);
    }
}

/* Color scheme preference detection */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --theme-name: 'light';
        --bg-primary: #f5f5f5;
        --bg-secondary: #ffffff;
        --bg-gradient: linear-gradient(135deg, #f5f5f5 0%, #f5f5f5 100%);
        --text-primary: #333333;
        --text-secondary: #666666;
        --text-muted: #999999;
        --border-color: rgba(0, 0, 0, 0.05);
        --border-hover: rgba(0, 0, 0, 0.1);
        --shadow-color: rgba(0, 0, 0, 0.1);
        --shadow-light: 0 4px 20px rgba(0, 0, 0, 0.15);
        --shadow-medium: 0 8px 32px rgba(0, 0, 0, 0.2);
        --shadow-heavy: 0 12px 48px rgba(0, 0, 0, 0.25);
        --glass-bg: rgba(255, 255, 255, 0.15);
        --glass-border: rgba(255, 255, 255, 0.2);
        --glass-hover: rgba(255, 255, 255, 0.25);
        --glass-active: rgba(255, 255, 255, 0.35);
        --accent-primary: #4A90E2;
        --accent-secondary: #50C878;
        --accent-warning: #FF5722;
        --accent-error: #EF4444;
        --scrollbar-thumb: rgba(0, 0, 0, 0.2);
        --scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
    }
}

/* Theme transition classes for smooth switching */
.theme-transitioning * {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease, 
                box-shadow 0.3s ease !important;
}

/* Print styles */
@media print {
    :root {
        --bg-primary: white;
        --bg-gradient: white;
        --text-primary: black;
        --border-color: black;
        --shadow-light: none;
        --shadow-medium: none;
        --shadow-heavy: none;
    }
    
    .theme-toggle,
    .reset-button,
    .saved-indicator {
        display: none !important;
    }
    
    .resizable-container {
        border: 1px solid black !important;
    }
    
    .resize-handle,
    .gif-indicator {
        display: none !important;
    }
}