/* Dark Mode Component Styles - Smooth Transitions */

/* Root Element Smooth Transitions */
:root {
    transition: 
        color-scheme 0.3s ease,
        background-color 0.3s ease;
}

/* Global Smooth Color Transitions */
* {
    transition: 
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        opacity 0.3s ease;
}

/* Prevent transition on page load */
.no-transition * {
    transition: none !important;
}

/* Enhanced transition during theme switching */
.theme-transitioning {
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

.theme-transitioning * {
    transition: 
        background-color 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) !important,
        color 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) !important,
        border-color 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) !important,
        box-shadow 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

/* Dark Mode Theme Variables Enhancement */
.dark-mode {
    --theme-bg: #1e1e2e;
    --theme-surface: #313244;
    --theme-text: #cdd6f4;
    --theme-subtext: #a6adc8;
    --theme-accent: #b4befe;
    --theme-yellow: #f9e2af;
    --theme-blue: #89b4fa;
    --theme-green: #a6e3a1;
    --theme-red: #f38ba8;
}

/* Light Mode Variables */
html:not(.dark-mode) {
    --theme-bg: #ffffff;
    --theme-surface: #f8fafc;
    --theme-text: #1f2937;
    --theme-subtext: #6b7280;
    --theme-accent: #667eea;
    --theme-yellow: #f59e0b;
    --theme-blue: #3b82f6;
    --theme-green: #10b981;
    --theme-red: #ef4444;
}

/* Dark Mode Specific Styles */
.dark-mode body {
    background: var(--theme-bg);
    color: var(--theme-text);
}

.dark-mode .container {
    background: var(--theme-bg);
}

/* Header Dark Mode Override */
.dark-mode .header,
body.dark-mode .header,
html.dark-mode .header {
    background: linear-gradient(135deg, #313244, #45475a) !important;
    color: var(--theme-text) !important;
}

.dark-mode .nav-panel {
    background: var(--theme-surface);
    border-color: #45475a;
}

.dark-mode .section {
    background: var(--theme-surface);
    border-color: #45475a;
}

.dark-mode .card-base,
.dark-mode .project-card,
.dark-mode .skill-category {
    background: var(--theme-bg);
    border-color: #45475a;
    color: var(--theme-text);
}

.dark-mode .skill-tag {
    background: var(--theme-surface);
    color: var(--theme-text);
    border-color: #45475a;
}

.dark-mode .footer {
    background: var(--theme-surface);
    color: var(--theme-subtext);
}

/* Dark Mode Icon Colors */
.dark-mode .fa-sun {
    color: var(--theme-yellow);
    text-shadow: 0 0 10px rgba(249, 226, 175, 0.5);
}

.dark-mode .fa-moon {
    color: var(--theme-blue);
}

/* Dark Mode Links */
.dark-mode a {
    color: var(--theme-accent);
}

.dark-mode a:hover {
    color: var(--theme-blue);
}

/* Dark Mode Mobile Menu */
.dark-mode .mobile-menu-btn {
    color: var(--theme-accent);
}

.dark-mode .mobile-menu-btn:hover {
    background: rgba(180, 190, 254, 0.1);
}

.dark-mode .nav-tabs {
    background: rgba(49, 50, 68, 0.98);
    border-color: #45475a;
}

/* Dark Mode Form Elements */
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
    background: var(--theme-surface);
    border-color: #45475a;
    color: var(--theme-text);
}

.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    border-color: var(--theme-accent);
    box-shadow: 0 0 0 2px rgba(180, 190, 254, 0.2);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .dark-mode,
    .dark-mode * {
        transition: none !important;
        animation: none !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .dark-mode {
        --theme-bg: #000000;
        --theme-text: #ffffff;
        --theme-surface: #1a1a1a;
    }
}

/* Print Mode */
@media print {
    .dark-mode {
        background: white !important;
        color: black !important;
    }
    
    .dark-mode * {
        background: white !important;
        color: black !important;
    }
}

/* Enhanced Smooth Transitions for Specific Elements */
body, .container, .header, .main-content, .footer {
    transition: background-color 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.navigation, .nav-menu, .nav-item {
    transition: 
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.project-card, .skill-tag, .education-item {
    transition: 
        background-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.2s ease;
}

.dark-mode-btn {
    transition: 
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.2s ease,
        box-shadow 0.3s ease;
}

/* Icon Transitions */
.dark-mode-btn i {
    transition: 
        transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
        color 0.3s ease;
}

/* Text Elements Smooth Transition */
h1, h2, h3, h4, h5, h6, p, span, a {
    transition: color 0.3s ease;
}

/* Button and Interactive Elements */
button, .btn, input, textarea, select {
    transition: 
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
    
    .dark-mode-btn i {
        transition: none !important;
    }
}