/* Dark Mode Styles */

[data-theme="dark"] {
    --bg-color: #1a1a2e;
    --text-color: #e0e0e0;
    --text-muted: #a0a0a0;
    --card-bg: #16213e;
    --border-color: #2a2a4a;
}

[data-theme="dark"] body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

[data-theme="dark"] .bg-white {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .text-\[\#2d3436\] {
    color: var(--text-color) !important;
}

[data-theme="dark"] .text-\[\#636e72\] {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .text-\[\#b2bec3\] {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .bg-gray-50 {
    background-color: var(--bg-color) !important;
}

[data-theme="dark"] .bg-gray-100 {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .shadow-\[0_10px_30px_rgba\(0\,0\,0\,0\.05\)\] {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .border-black\/\[0\.02\] {
    border-color: var(--border-color) !important;
}

/* Sunset animation */
@keyframes sunset {
    0% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
    50% {
        opacity: 0;
        transform: rotate(180deg) scale(0.5);
    }
    51% {
        opacity: 0;
        transform: rotate(-180deg) scale(0.5);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

/* Sunrise animation */
@keyframes sunrise {
    0% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
    50% {
        opacity: 0;
        transform: rotate(-180deg) scale(0.5);
    }
    51% {
        opacity: 0;
        transform: rotate(180deg) scale(0.5);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

.animate-sunset {
    animation: sunset 0.6s ease-in-out;
}

.animate-sunrise {
    animation: sunrise 0.6s ease-in-out;
}

/* Prevent inversion for specific images */
img.no-invert {
    filter: none !important;
}