html {
    color-scheme: light;
    transition: background-color 0.25s ease, color 0.25s ease;
}

html.dark {
    color-scheme: dark;
}

body {
    transition: background-color 0.25s ease, color 0.25s ease;
}

html.dark body {
    background-color: #111827 !important;
    color: #e5e7eb;
}

/* Shared compatibility rules for older public and admin views. */
html.dark body .text-dark {
    color: #f3f4f6 !important;
}

html.dark body .editor-content,
html.dark body .editor-content h2,
html.dark body .editor-content h3,
html.dark body .editor-content p,
html.dark body .editor-content li {
    color: #f3f4f6 !important;
}

html.dark body .editor-content a,
html.dark body .editor-content code.inline-code {
    color: #93c5fd !important;
}

html.dark body .typing-page {
    background: #111827 !important;
    color: #f3f4f6 !important;
}

html.dark body .typing-ad {
    background: #1f2937 !important;
    color: #cbd5e1 !important;
}

html.dark body .typing-char.is-correct {
    color: #86efac !important;
}

html.dark body .typing-char.is-wrong {
    background: #7f1d1d !important;
    color: #fecaca !important;
}

html.dark body .tab-active {
    color: #bfdbfe !important;
}

html.dark body .publisher-icon,
html.dark body .story-time {
    color: #bfdbfe !important;
}

/* The article hero has an inline light background in its Blade view. Keep its
   text and background paired with the active theme. */
.blog-header {
    background-color: #fff;
    color: #111827;
}

.blog-header .text-dark {
    color: #111827;
}

#content h1.ce-header {
    background: none;
    color: #111827;
    -webkit-text-fill-color: #111827;
}

html.dark body .blog-header {
    background-color: #111827 !important;
    color: #f3f4f6;
}

html.dark body .blog-header .text-dark {
    color: #f3f4f6 !important;
}

/* Blog article body, including Editor.js blocks rendered after the API loads. */
html.dark body #content,
html.dark body #content .ce-header,
html.dark body #content .ce-paragraph,
html.dark body #content .cdx-list__item,
html.dark body #content .ce-quote__text {
    color: #f3f4f6 !important;
}

html.dark body #content h1.ce-header {
    background: none;
    color: #f3f4f6 !important;
    -webkit-text-fill-color: #f3f4f6;
}

html.dark body #content .ce-quote__caption,
html.dark body #content .ce-image__caption {
    color: #cbd5e1 !important;
}

html.dark body #content .ce-quote {
    background: #1f2937 !important;
}

html.dark body #content .inline-code {
    background: #374151 !important;
    color: #fca5a5 !important;
    border-color: #4b5563 !important;
}

html.dark body #content .tc-table__row:nth-child(even) {
    background-color: #1f2937 !important;
}

html.dark body #content .tc-table__cell {
    border-color: #4b5563 !important;
    color: #f3f4f6 !important;
}

html.dark body #content a,
html.dark body #related-content a:not(.group) {
    color: #93c5fd;
}

html.dark body #related-content [class~="text-blue-600"] {
    color: #93c5fd !important;
}

html.dark body #related-content [class~="bg-white"] {
    background-color: #1f2937 !important;
}

html.dark body #blog-tags .tag-pill {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #f3f4f6 !important;
}

/* Bring older views that only use light neutral utilities into the active theme. */
html.dark body [class~="bg-white"],
html.dark body [class~="bg-gray-50"],
html.dark body [class~="bg-slate-50"],
html.dark body [class~="bg-zinc-50"],
html.dark body [class~="bg-neutral-50"] {
    background-color: #1f2937 !important;
}

html.dark body [class~="bg-gray-100"],
html.dark body [class~="bg-slate-100"],
html.dark body [class~="bg-zinc-100"],
html.dark body [class~="bg-neutral-100"] {
    background-color: #1f2937 !important;
}

html.dark body [class~="bg-gray-200"],
html.dark body [class~="bg-slate-200"],
html.dark body [class~="bg-zinc-200"],
html.dark body [class~="bg-neutral-200"] {
    background-color: #374151 !important;
}

html.dark body [class~="text-black"],
html.dark body [class~="text-gray-950"],
html.dark body [class~="text-gray-900"],
html.dark body [class~="text-gray-800"],
html.dark body [class~="text-gray-700"],
html.dark body [class~="text-slate-950"],
html.dark body [class~="text-slate-900"],
html.dark body [class~="text-slate-800"],
html.dark body [class~="text-slate-700"],
html.dark body [class~="text-zinc-900"],
html.dark body [class~="text-zinc-800"],
html.dark body [class~="text-zinc-700"],
html.dark body [class~="text-neutral-900"],
html.dark body [class~="text-neutral-800"],
html.dark body [class~="text-neutral-700"],
html.dark body [class~="text-red-900"],
html.dark body [class~="text-red-800"],
html.dark body [class~="text-red-700"],
html.dark body [class~="text-orange-900"],
html.dark body [class~="text-orange-800"],
html.dark body [class~="text-orange-700"],
html.dark body [class~="text-amber-900"],
html.dark body [class~="text-amber-800"],
html.dark body [class~="text-amber-700"],
html.dark body [class~="text-yellow-900"],
html.dark body [class~="text-yellow-800"],
html.dark body [class~="text-yellow-700"],
html.dark body [class~="text-lime-900"],
html.dark body [class~="text-lime-800"],
html.dark body [class~="text-lime-700"],
html.dark body [class~="text-green-900"],
html.dark body [class~="text-green-800"],
html.dark body [class~="text-green-700"],
html.dark body [class~="text-emerald-900"],
html.dark body [class~="text-emerald-800"],
html.dark body [class~="text-emerald-700"],
html.dark body [class~="text-teal-900"],
html.dark body [class~="text-teal-800"],
html.dark body [class~="text-teal-700"],
html.dark body [class~="text-cyan-900"],
html.dark body [class~="text-cyan-800"],
html.dark body [class~="text-cyan-700"],
html.dark body [class~="text-sky-900"],
html.dark body [class~="text-sky-800"],
html.dark body [class~="text-sky-700"],
html.dark body [class~="text-blue-900"],
html.dark body [class~="text-blue-800"],
html.dark body [class~="text-blue-700"],
html.dark body [class~="text-indigo-900"],
html.dark body [class~="text-indigo-800"],
html.dark body [class~="text-indigo-700"],
html.dark body [class~="text-violet-900"],
html.dark body [class~="text-violet-800"],
html.dark body [class~="text-violet-700"],
html.dark body [class~="text-purple-900"],
html.dark body [class~="text-purple-800"],
html.dark body [class~="text-purple-700"],
html.dark body [class~="text-fuchsia-900"],
html.dark body [class~="text-fuchsia-800"],
html.dark body [class~="text-fuchsia-700"],
html.dark body [class~="text-pink-900"],
html.dark body [class~="text-pink-800"],
html.dark body [class~="text-pink-700"],
html.dark body [class~="text-rose-900"],
html.dark body [class~="text-rose-800"],
html.dark body [class~="text-rose-700"] {
    color: #f3f4f6 !important;
}

html.dark body [class~="text-gray-600"],
html.dark body [class~="text-gray-500"],
html.dark body [class~="text-slate-600"],
html.dark body [class~="text-slate-500"],
html.dark body [class~="text-zinc-600"],
html.dark body [class~="text-zinc-500"],
html.dark body [class~="text-neutral-600"],
html.dark body [class~="text-neutral-500"] {
    color: #cbd5e1 !important;
}

html.dark body [class~="border-gray-50"],
html.dark body [class~="border-gray-100"],
html.dark body [class~="border-gray-200"],
html.dark body [class~="border-gray-300"],
html.dark body [class~="border-slate-100"],
html.dark body [class~="border-slate-200"],
html.dark body [class~="border-slate-300"],
html.dark body [class~="border-zinc-100"],
html.dark body [class~="border-zinc-200"],
html.dark body [class~="border-zinc-300"] {
    border-color: #374151 !important;
}

html.dark input,
html.dark textarea,
html.dark select {
    color-scheme: dark;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #9ca3af;
}

html.dark .prose h2 { color: #f3f4f6; }
html.dark .prose p { color: #d1d5db; }

.theme-icon-light[hidden],
.theme-icon-dark[hidden] {
    display: none !important;
}