/* Theme Toggle Button */
.theme-switch {
    position: fixed;
    bottom: var(--space-4);
    right: var(--space-4);
    width: 56px;
    height: 56px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg),
                0 0 0 4px var(--color-background),
                0 0 0 6px var(--color-border),
                0 0 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-bounce);
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

[data-theme="light"] .theme-switch {
    background: linear-gradient(135deg, #ffffff 0%, var(--color-surface) 100%);
}

[data-theme="dark"] .theme-switch {
    background: linear-gradient(135deg, var(--color-surface) 0%, #000000 100%);
    box-shadow: var(--shadow-lg),
                0 0 0 4px var(--color-background),
                0 0 0 6px var(--color-border),
                0 0 20px rgba(255, 255, 255, 0.1);
}

.theme-switch:hover {
    transform: scale(1.1) rotate(15deg);
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg),
                0 0 0 4px var(--color-background),
                0 0 0 6px var(--color-primary),
                0 0 25px var(--color-primary);
}

.theme-switch:active {
    transform: scale(0.95) rotate(15deg);
}

/* Theme transition */
html {
    transition: background-color 0.3s ease,
                color 0.3s ease;
}

/* Theme Animations */
@keyframes rotateIn {
    from {
        transform: rotate(-180deg) scale(0.5);
        opacity: 0;
    }
    50% {
        transform: rotate(-90deg) scale(0.75);
        opacity: 0.5;
    }
    to {
        transform: rotate(0) scale(1);
        opacity: 1;
    }
}

@keyframes rotateOut {
    from {
        transform: rotate(0) scale(1);
        opacity: 1;
    }
    to {
        transform: rotate(180deg) scale(0.5);
        opacity: 0;
    }
}

.theme-switch::before {
    content: "🌒";
    display: block;
    font-size: 1.75rem;
    opacity: 1;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    animation: rotateIn 0.6s var(--transition-bounce);
    transform-origin: center;
    will-change: transform, opacity;
    position: absolute;
}

[data-theme="dark"] .theme-switch::before {
    content: "🌞";
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.theme-switch[aria-pressed="true"]::before {
    animation: rotateOut 0.6s var(--transition-bounce) forwards;
}

.theme-switch:hover::before {
    transform: scale(1.1);
    opacity: 1;
}

/* Button Focus States */
.theme-switch:focus {
    outline: none;
    box-shadow: var(--shadow-lg),
                0 0 0 4px var(--color-background),
                0 0 0 6px var(--color-primary);
}

.theme-switch:focus:not(:focus-visible) {
    box-shadow: var(--shadow-lg),
                0 0 0 4px var(--color-background),
                0 0 0 6px var(--color-border);
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .theme-switch {
        border: 2px solid var(--color-text);
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .theme-switch {
        transition: none;
    }
    .theme-switch:hover {
        transform: none;
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .theme-switch {
        bottom: var(--space-3);
        right: var(--space-3);
    }
}

/* Print Styles */
@media print {
    .theme-switch {
        display: none;
    }
}
