/* Dark theme overrides for the portal. Activated by data-theme="dark" on . */ html[data-theme='dark'] body { background: rgb(15, 23, 42); color: rgb(226, 232, 240); } html[data-theme='dark'] [data-topbar], html[data-theme='dark'] [data-nav] { background: rgb(15, 23, 42); border-color: rgb(51, 65, 85); } html[data-theme='dark'] [data-topbar] a { color: rgb(241, 245, 249); } html[data-theme='dark'] [data-nav] a { color: rgb(203, 213, 225); } html[data-theme='dark'] [data-nav] a:hover { background: rgb(30, 41, 59); } /* Active link override: the `bg-brand-soft` cream is unusable in dark mode, and the [data-nav] a color rule above would defeat `text-brand`. */ html[data-theme='dark'] [data-nav] a.bg-brand-soft { background: rgba(217, 119, 6, 0.18); color: oklch(78% 0.13 40); } /* Tailwind utility overrides for slate text used outside .prose-doc (sidebar section titles, figcaptions, the architecture SVG). */ html[data-theme='dark'] .text-slate-500, html[data-theme='dark'] .text-slate-600, html[data-theme='dark'] .text-slate-700 { color: rgb(148, 163, 184); } html[data-theme='dark'] .badge-req { background: rgb(51, 65, 85); color: rgb(226, 232, 240); } html[data-theme='dark'] .badge-opt { background: rgba(245, 158, 11, 0.2); color: rgb(254, 215, 170); } html[data-theme='dark'] .prose-doc h1, html[data-theme='dark'] .prose-doc h2, html[data-theme='dark'] .prose-doc h3, html[data-theme='dark'] .prose-doc h4 { color: rgb(241, 245, 249); } html[data-theme='dark'] .prose-doc p, html[data-theme='dark'] .prose-doc li { color: rgb(226, 232, 240); } html[data-theme='dark'] .prose-doc th { background: rgb(30, 41, 59); color: rgb(226, 232, 240); } html[data-theme='dark'] .prose-doc th, html[data-theme='dark'] .prose-doc td { border-color: rgb(51, 65, 85); } html[data-theme='dark'] .prose-doc :not(pre) > code { background: rgb(30, 41, 59); color: rgb(226, 232, 240); } html[data-theme='dark'] .callout { background: rgba(217, 119, 6, 0.12); color: rgb(226, 232, 240); } html[data-theme='dark'] .callout-warn { background: rgba(245, 158, 11, 0.14); color: rgb(254, 215, 170); border-color: rgb(245, 158, 11); } html[data-theme='dark'] .callout-danger { background: rgba(239, 68, 68, 0.14); color: rgb(254, 202, 202); border-color: rgb(239, 68, 68); } html[data-theme='dark'] footer { color: rgb(148, 163, 184); border-color: rgb(51, 65, 85); } html[data-theme='dark'] .event-card, html[data-theme='dark'] main a.group { border-color: rgb(51, 65, 85); } /* The mobile-nav toggle button uses inline Tailwind classes; redo its dark variant here. */ html[data-theme='dark'] button[data-nav-toggle] { border-color: rgb(51, 65, 85); color: rgb(203, 213, 225); } html[data-theme='dark'] button[data-nav-toggle]:hover { background: rgb(30, 41, 59); } /* Theme switcher button. */ button[data-theme-toggle] { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.375rem; border: 1px solid rgb(226, 232, 240); color: rgb(71, 85, 105); background: transparent; cursor: pointer; } button[data-theme-toggle]:hover { background: rgb(248, 250, 252); } html[data-theme='dark'] button[data-theme-toggle] { border-color: rgb(51, 65, 85); color: rgb(203, 213, 225); } html[data-theme='dark'] button[data-theme-toggle]:hover { background: rgb(30, 41, 59); }