/**
 * Terminal Color Themes
 * Switchable terminal color schemes for MakingAIApps theme
 */

/* Theme transition animations */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Default Dark Theme */
[data-theme="default"] {
    --terminal-bg: #0a0a0a;
    --terminal-text: #00ff00;
    --terminal-accent: #ffb000;
    --terminal-secondary: #888888;
    --terminal-border: #333333;
    --terminal-window-bg: #1a1a1a;
    --terminal-cursor: #00ff00;
}

/* Dracula Theme */
[data-theme="dracula"] {
    --terminal-bg: #282a36;
    --terminal-text: #f8f8f2;
    --terminal-accent: #ff79c6;
    --terminal-secondary: #6272a4;
    --terminal-border: #44475a;
    --terminal-window-bg: #383a59;
    --terminal-cursor: #ff79c6;
}

[data-theme="dracula"] .terminal-button.close { 
    background: #ff5555; 
}
[data-theme="dracula"] .terminal-button.minimize { 
    background: #f1fa8c; 
}
[data-theme="dracula"] .terminal-button.maximize { 
    background: #50fa7b; 
}

/* Monokai Theme */
[data-theme="monokai"] {
    --terminal-bg: #272822;
    --terminal-text: #f8f8f2;
    --terminal-accent: #fd971f;
    --terminal-secondary: #75715e;
    --terminal-border: #49483e;
    --terminal-window-bg: #383830;
    --terminal-cursor: #a6e22e;
}

[data-theme="monokai"] .terminal-button.close { 
    background: #f92672; 
}
[data-theme="monokai"] .terminal-button.minimize { 
    background: #e6db74; 
}
[data-theme="monokai"] .terminal-button.maximize { 
    background: #a6e22e; 
}

/* Matrix Theme */
[data-theme="matrix"] {
    --terminal-bg: #000000;
    --terminal-text: #00ff41;
    --terminal-accent: #008f11;
    --terminal-secondary: #003b00;
    --terminal-border: #008f11;
    --terminal-window-bg: #0a0a0a;
    --terminal-cursor: #00ff41;
}

[data-theme="matrix"] .terminal-window {
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.2);
}

[data-theme="matrix"] .terminal-window:hover {
    box-shadow: 0 0 30px rgba(0, 255, 65, 0.3);
}

[data-theme="matrix"] .terminal-button.close { 
    background: #ff0000; 
}
[data-theme="matrix"] .terminal-button.minimize { 
    background: #00ff41; 
}
[data-theme="matrix"] .terminal-button.maximize { 
    background: #00ff41; 
}

/* Matrix rain effect (optional) */
[data-theme="matrix"] body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(90deg, transparent 98%, rgba(0, 255, 65, 0.03) 100%),
        linear-gradient(transparent 98%, rgba(0, 255, 65, 0.03) 100%);
    background-size: 20px 20px;
    animation: matrix-grid 20s linear infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes matrix-grid {
    0% { transform: translate(0, 0); }
    100% { transform: translate(20px, 20px); }
}

/* Retro Theme */
[data-theme="retro"] {
    --terminal-bg: #2b1810;
    --terminal-text: #ffb000;
    --terminal-accent: #ff8c00;
    --terminal-secondary: #8b4513;
    --terminal-border: #654321;
    --terminal-window-bg: #3d2817;
    --terminal-cursor: #ffb000;
}

[data-theme="retro"] .terminal-window {
    box-shadow: 0 0 15px rgba(255, 176, 0, 0.1);
}

[data-theme="retro"] .terminal-button.close { 
    background: #cd853f; 
}
[data-theme="retro"] .terminal-button.minimize { 
    background: #daa520; 
}
[data-theme="retro"] .terminal-button.maximize { 
    background: #ffd700; 
}

/* CRT Screen effect for retro theme */
[data-theme="retro"] body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(rgba(255, 176, 0, 0.02) 50%, transparent 50%);
    background-size: 100% 2px;
    animation: crt-flicker 0.15s linear infinite;
    pointer-events: none;
    z-index: 1000;
}

@keyframes crt-flicker {
    0% { opacity: 1; }
    98% { opacity: 1; }
    99% { opacity: 0.98; }
    100% { opacity: 1; }
}

/* Theme-specific hover effects */
[data-theme="default"] .blog-card:hover {
    box-shadow: 0 10px 30px rgba(0, 255, 0, 0.15);
}

[data-theme="dracula"] .blog-card:hover {
    box-shadow: 0 10px 30px rgba(255, 121, 198, 0.15);
}

[data-theme="monokai"] .blog-card:hover {
    box-shadow: 0 10px 30px rgba(253, 151, 31, 0.15);
}

[data-theme="matrix"] .blog-card:hover {
    box-shadow: 0 10px 30px rgba(0, 255, 65, 0.2);
}

[data-theme="retro"] .blog-card:hover {
    box-shadow: 0 10px 30px rgba(255, 176, 0, 0.15);
}

/* Theme switcher styling */
.theme-switcher {
    position: relative;
}

.theme-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 35px;
    min-width: 120px;
}

.theme-select:hover {
    background-color: var(--terminal-bg);
}

/* Loading animations */
.theme-loading {
    position: relative;
    overflow: hidden;
}

.theme-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.1), 
        transparent
    );
    animation: loading-sweep 1.5s infinite;
}

@keyframes loading-sweep {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .cursor {
        animation: none;
    }
    
    .typing-animation {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --terminal-bg: #000000;
        --terminal-text: #ffffff;
        --terminal-accent: #ffff00;
        --terminal-border: #ffffff;
    }
}

/* Print styles */
@media print {
    body {
        background: white !important;
        color: black !important;
    }
    
    .terminal-window {
        border: 2px solid black !important;
        background: white !important;
        box-shadow: none !important;
    }
    
    .terminal-header {
        background: #f0f0f0 !important;
        border-bottom: 1px solid black !important;
    }
    
    .terminal-buttons {
        display: none !important;
    }
    
    .cursor,
    .theme-switcher {
        display: none !important;
    }
    
    a {
        color: black !important;
        text-decoration: underline !important;
    }
}