/* ===================================
   Auto Theme Switcher - Color Themes
   =================================== */

/* Base theme is already defined in style.css - Yellow/Gold */

/* Theme 1: Cyan Blue */
[data-theme="cyan"] {
    --color-accent: #00d4ff;
    --color-accent-dark: #00b8e6;
    --color-accent-glow: rgba(0, 212, 255, 0.3);
}

/* Theme 2: Electric Purple */
[data-theme="purple"] {
    --color-accent: #b537f2;
    --color-accent-dark: #9d2bd9;
    --color-accent-glow: rgba(181, 55, 242, 0.3);
}

/* Theme 3: Neon Green */
[data-theme="green"] {
    --color-accent: #00ff88;
    --color-accent-dark: #00e077;
    --color-accent-glow: rgba(0, 255, 136, 0.3);
}

/* Theme 4: Hot Pink */
[data-theme="pink"] {
    --color-accent: #ff2e97;
    --color-accent-dark: #e6187f;
    --color-accent-glow: rgba(255, 46, 151, 0.3);
}

/* Theme 5: Orange Sunset */
[data-theme="orange"] {
    --color-accent: #ff6b35;
    --color-accent-dark: #e65a2e;
    --color-accent-glow: rgba(255, 107, 53, 0.3);
}

/* Theme 6: Red Energy */
[data-theme="red"] {
    --color-accent: #ff3366;
    --color-accent-dark: #e62958;
    --color-accent-glow: rgba(255, 51, 102, 0.3);
}

/* Theme 7: Ice Blue */
[data-theme="ice"] {
    --color-accent: #4dd0e1;
    --color-accent-dark: #26c6da;
    --color-accent-glow: rgba(77, 208, 225, 0.3);
}

/* Theme 8: Lime */
[data-theme="lime"] {
    --color-accent: #cddc39;
    --color-accent-dark: #b9c932;
    --color-accent-glow: rgba(205, 220, 57, 0.3);
}

/* Theme 9: Violet Dream */
[data-theme="violet"] {
    --color-accent: #9c27b0;
    --color-accent-dark: #7b1fa2;
    --color-accent-glow: rgba(156, 39, 176, 0.3);
}

/* Theme 10: Teal */
[data-theme="teal"] {
    --color-accent: #1de9b6;
    --color-accent-dark: #00bfa5;
    --color-accent-glow: rgba(29, 233, 182, 0.3);
}

/* Theme 11: Coral */
[data-theme="coral"] {
    --color-accent: #ff7043;
    --color-accent-dark: #f4511e;
    --color-accent-glow: rgba(255, 112, 67, 0.3);
}

/* Theme 12: Gold (Original) */
[data-theme="gold"] {
    --color-accent: #ffd700;
    --color-accent-dark: #ffb700;
    --color-accent-glow: rgba(255, 215, 0, 0.3);
}

/* ===================================
   Smooth Theme Transition
   =================================== */
:root {
    transition: --color-accent 1.5s ease,
                --color-accent-dark 1.5s ease,
                --color-accent-glow 1.5s ease;
}

/* Apply smooth transitions to all elements using accent colors */
body,
.nav-logo,
.nav-link::after,
.hero-label,
.hero-tagline,
.hero-separator,
.btn-primary,
.btn-secondary,
.section-number,
.skill-badge,
.interest-icon,
.contact-icon,
.hero-profile-img,
.stat-number,
.lang-btn.active,
.scroll-top-btn {
    transition: color 1.5s ease,
                background-color 1.5s ease,
                border-color 1.5s ease,
                box-shadow 1.5s ease;
}

/* ===================================
   Theme Change Indicator (Optional)
   =================================== */
.theme-indicator {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-accent);
    border-radius: var(--border-radius-md);
    padding: 0.75rem 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--color-accent);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    z-index: 998;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.theme-indicator.show {
    opacity: 1;
    transform: translateY(0);
}

.theme-indicator-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--color-accent);
    border-radius: 50%;
    margin-right: 0.5rem;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

/* ===================================
   Mobile Adjustments
   =================================== */
@media (max-width: 768px) {
    .theme-indicator {
        bottom: 1rem;
        left: 1rem;
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }
}

/* ===================================
   Reduced Motion Support
   =================================== */
@media (prefers-reduced-motion: reduce) {
    :root,
    body,
    .nav-logo,
    .nav-link::after,
    .hero-label,
    .hero-tagline,
    .hero-separator,
    .btn-primary,
    .btn-secondary,
    .section-number,
    .skill-badge,
    .interest-icon,
    .contact-icon,
    .hero-profile-img,
    .stat-number,
    .lang-btn.active,
    .scroll-top-btn {
        transition: none !important;
    }
    
    .theme-indicator-dot {
        animation: none !important;
    }
}