/* Dark mode styles for Rainbow Blog */

/* Base dark mode colors */
.dark {
    color-scheme: dark;
}

.dark body {
    background-color: #121212;
    color: #e0e0e0;
}

/* Background colors */
.dark .bg-white {
    background-color: #1e1e1e;
}

.dark .bg-gray-50 {
    background-color: #252525;
}

.dark .bg-gray-100 {
    background-color: #2a2a2a;
}

.dark .bg-gray-200 {
    background-color: #303030;
}

/* Text colors */
.dark .text-gray-900 {
    color: #f0f0f0;
}

.dark .text-gray-800 {
    color: #e0e0e0;
}

.dark .text-gray-700 {
    color: #d0d0d0;
}

.dark .text-gray-600 {
    color: #b0b0b0;
}

.dark .text-gray-500 {
    color: #909090;
}

/* Border colors */
.dark .border-gray-100 {
    border-color: #303030;
}

.dark .border-gray-200 {
    border-color: #404040;
}

.dark .border-gray-300 {
    border-color: #505050;
}

/* Hover states */
.dark .hover\:bg-gray-50:hover {
    background-color: #2a2a2a;
}

.dark .hover\:bg-gray-100:hover {
    background-color: #303030;
}

.dark .hover\:bg-gray-200:hover {
    background-color: #3a3a3a;
}

.dark .hover\:text-gray-700:hover {
    color: #d0d0d0;
}

.dark .hover\:text-gray-900:hover {
    color: #f0f0f0;
}

/* Buttons */
.dark .bg-gray-900 {
    background-color: #f0f0f0;
    color: #1e1e1e;
}

.dark .hover\:bg-gray-800:hover {
    background-color: #e0e0e0;
}

/* Input fields */
.dark input,
.dark textarea,
.dark select {
    background-color: #2a2a2a;
    border-color: #404040;
    color: #e0e0e0;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #606060;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    border-color: #505050;
}

/* Code blocks */
.dark pre,
.dark code {
    background-color: #2a2a2a;
    color: #e0e0e0;
}

/* Article content */
.dark .prose {
    color: #e0e0e0;
}

.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark .prose h5,
.dark .prose h6 {
    color: #f0f0f0;
}

.dark .prose a {
    color: #60a5fa;
}

.dark .prose strong {
    color: #f0f0f0;
}

.dark .prose code {
    background-color: #2a2a2a;
    color: #e0e0e0;
}

.dark .prose pre {
    background-color: #252525;
}

.dark .prose blockquote {
    border-left-color: #404040;
    color: #b0b0b0;
}

/* Scrollbar */
.dark ::-webkit-scrollbar {
    background-color: #1e1e1e;
}

.dark ::-webkit-scrollbar-thumb {
    background-color: #404040;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background-color: #505050;
}

/* Animation for theme transition */
* {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}