[x-cloak] { display: none !important; }

/* Dark mode overrides for light utility classes used across pages.
   Uses !important to override Tailwind CDN utilities which are
   injected after this stylesheet. */
html.dark .bg-white { background-color: #1f2937 !important; }       /* gray-800 */
html.dark .bg-warm-50 { background-color: #111827 !important; }     /* gray-900 */
html.dark .bg-warm-100 { background-color: #1f2937 !important; }
html.dark .bg-gray-50 { background-color: #111827 !important; }
html.dark .bg-gray-100 { background-color: #1f2937 !important; }
html.dark .bg-sage-50 { background-color: rgba(75, 86, 65, 0.25) !important; }
html.dark .bg-sage-100 { background-color: rgba(75, 86, 65, 0.4) !important; }

html.dark .text-gray-900 { color: #f3f4f6 !important; }             /* gray-100 */
html.dark .text-gray-800 { color: #e5e7eb !important; }             /* gray-200 */
html.dark .text-gray-700 { color: #d1d5db !important; }             /* gray-300 */
html.dark .text-gray-600 { color: #9ca3af !important; }             /* gray-400 */
html.dark .text-gray-500 { color: #9ca3af !important; }

html.dark .border-gray-100,
html.dark .border-gray-200 { border-color: #374151 !important; }    /* gray-700 */
html.dark .border-gray-300 { border-color: #4b5563 !important; }    /* gray-600 */

/* Flash / status backgrounds — dim pale tints into translucent dark tints */
html.dark .bg-green-50 { background-color: rgba(16, 185, 129, 0.12) !important; }
html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.12) !important; }
html.dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.12) !important; }
html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.12) !important; }
html.dark .border-green-200 { border-color: rgba(16, 185, 129, 0.4) !important; }
html.dark .border-red-200 { border-color: rgba(239, 68, 68, 0.4) !important; }
html.dark .border-yellow-200 { border-color: rgba(234, 179, 8, 0.4) !important; }
html.dark .border-blue-500 { border-color: #3b82f6 !important; }
html.dark .text-green-800 { color: #6ee7b7 !important; }
html.dark .text-red-800 { color: #fca5a5 !important; }
html.dark .text-yellow-800 { color: #fde68a !important; }
html.dark .text-blue-800 { color: #93c5fd !important; }

/* Form controls */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="tel"],
html.dark input[type="password"],
html.dark input[type="date"],
html.dark input[type="time"],
html.dark input[type="number"],
html.dark input[type="url"],
html.dark input[type="search"],
html.dark textarea,
html.dark select {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
    border-color: #4b5563 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #6b7280 !important; }

/* Prose / blog content */
html.dark .prose { color: #d1d5db; }
html.dark .prose :where(h1,h2,h3,h4,h5,h6,strong) { color: #f3f4f6; }
html.dark .prose :where(a) { color: #b5bfa5; }
html.dark .prose :where(blockquote) { color: #9ca3af; border-left-color: #374151; }
html.dark .prose :where(code) { color: #f3f4f6; background-color: #374151; }
html.dark .prose :where(hr) { border-color: #374151; }