/* Cross-Page Theme Synchronization - Performance Optimized */

/* Performance-Tiered Transition System */
:root {
    /* Tier 1: Critical - Ultra fast (buttons, navigation) */
    --transition-critical: background-color 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out;
    
    /* Tier 2: Standard - Fast (cards, sections) */
    --transition-standard: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Tier 3: Decorative - Smooth (non-critical elements) */
    --transition-decorative: all 0.3s ease;
    
    /* Transform transitions (GPU accelerated) */
    --transition-transform: transform 0.15s ease-out;
    
    /* Legacy support */
    --theme-transition: var(--transition-standard);
}

/* Flash Prevention - Instant Load */
html {
    transition: var(--transition-standard);
}

html.no-flash {
    transition: none !important;
}

html.no-flash * {
    transition: none !important;
}

/* Cross-page Theme Classes */
.theme-dark,
.dark-mode {
    --bg-primary: #1e1e2e;
    --bg-secondary: #313244;
    --text-primary: #cdd6f4;
    --text-secondary: #a6adc8;
    --accent-primary: #b4befe;
    --accent-secondary: #f9e2af;
}

.theme-light,
html:not(.dark-mode) {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --accent-primary: #667eea;
    --accent-secondary: #764ba2;
}

/* Universal Button Hover States - Tier 1 Critical */
.dark-mode-btn {
    transition: var(--transition-critical);
    will-change: transform, background-color;
}

.dark-mode-btn:hover {
    transition: var(--transition-critical), var(--transition-transform);
}

/* Navigation Theme Consistency - Tier 1 Critical */
.nav-panel {
    transition: var(--transition-critical);
}

.nav-tab {
    transition: var(--transition-critical);
}

.nav-tab::before {
    transition: width 0.15s ease-out;
}
/* Theme Toggle Animation Enhancement - GPU Optimized */
.dark-mode-btn i {
    transition: var(--transition-transform);
    transform-origin: center;
    will-change: transform;
}

.dark-mode-btn:hover i {
    transform: scale(1.1);
}

.dark-mode .dark-mode-btn:hover i {
    transform: scale(1.1);
}

/* Cross-page Content Transition - Tier 2 Standard */
.container,
.main-content {
    transition: var(--transition-standard);
}

.section {
    transition: var(--transition-standard);
}

/* Enhanced Focus States for Accessibility - Tier 1 Critical */
.dark-mode-btn:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(180, 190, 254, 0.2);
    transition: box-shadow 0.15s ease-out, outline-color 0.15s ease-out;
}

.dark-mode .dark-mode-btn:focus-visible {
    box-shadow: 0 0 0 4px rgba(180, 190, 254, 0.3);
}

/* Theme Transition for Interactive Elements - Tiered System */
.skill-tag {
    transition: var(--transition-standard);
    will-change: transform, background-color;
}

.project-card {
    transition: var(--transition-standard);
    will-change: transform, box-shadow;
}

.nav-tab,
button {
    transition: var(--transition-critical);
}

a {
    transition: var(--transition-critical);
}

/* Reduced Motion Respect - Performance First */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-critical: none;
        --transition-standard: none;
        --transition-decorative: none;
        --transition-transform: none;
    }
    
    html,
    .dark-mode-btn,
    .dark-mode-btn i,
    .container,
    .main-content,
    .section,
    .skill-tag,
    .project-card,
    .nav-tab,
    button,
    a {
        transition: none !important;
        animation: none !important;
    }
    
    .dark-mode-btn:hover i {
        transform: scale(1.1) !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .dark-mode-btn {
        border-width: 2px;
    }
    
    .dark-mode-btn:hover {
        border-width: 3px;
    }
}

/* Print Mode - Hide Theme Toggle */
@media print {
    .dark-mode-btn,
    .nav-controls {
        display: none !important;
    }
}