/* Dark theme. Applied when carries data-theme="dark". Every value below
is checked for contrast against the surface it sits on, see contrast_check. */
:root[data-theme="dark"] {
--d-body: #121214;
--d-head: #191a1f;
--d-card: #262930;
--d-card-2: #2f333b;
--d-line: #383c45;
--d-line-soft: #2c3038;
--d-text: #f2f3f5;
--d-text-2: #c3c7cf;
--d-muted: #9aa0ab;
--d-faint: #767c87;
--d-accent: #5b9cff;
--d-accent-2: #7fb4ff;
--d-ok: #4ade80;
--d-warn: #fbbf24;
--d-bad: #f87171;
color-scheme: dark;
}
:root[data-theme="dark"] body {
background: var(--d-body);
color: var(--d-text);
}
/* ---- surfaces ---- */
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-gray-50,
:root[data-theme="dark"] .bg-gray-100 { background-color: var(--d-card) !important; }
/* Pages put their page colour on body with the same utility classes, so the
body itself has to win back the darker ground behind the cards. */
:root[data-theme="dark"] body.bg-white,
:root[data-theme="dark"] body.bg-gray-50,
:root[data-theme="dark"] body.bg-gray-100,
:root[data-theme="dark"] body.bg-gray-200 { background-color: var(--d-body) !important; }
:root[data-theme="dark"] .bg-gray-200 { background-color: var(--d-card-2) !important; }
:root[data-theme="dark"] .bg-gray-800,
:root[data-theme="dark"] .bg-gray-900 { background-color: var(--d-head) !important; }
:root[data-theme="dark"] .navbar { background-color: var(--d-head) !important; color: var(--d-text) !important; }
/* ---- type ---- */
:root[data-theme="dark"] .text-black,
:root[data-theme="dark"] .text-gray-900,
:root[data-theme="dark"] .text-gray-800 { color: var(--d-text) !important; }
:root[data-theme="dark"] .text-gray-700,
:root[data-theme="dark"] .text-gray-600 { color: var(--d-text-2) !important; }
:root[data-theme="dark"] .text-gray-500,
:root[data-theme="dark"] .text-gray-400 { color: var(--d-muted) !important; }
:root[data-theme="dark"] .navbar-logo { color: var(--d-text) !important; }
/* ---- lines ---- */
:root[data-theme="dark"] .border-gray-200,
:root[data-theme="dark"] .border-gray-300,
:root[data-theme="dark"] .border-gray-700,
:root[data-theme="dark"] .divide-gray-100 > * + * { border-color: var(--d-line) !important; }
/* ---- controls ---- */
/* The language picker paints its own background inline, so form controls need
to win against a style attribute rather than just a class. */
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
background-color: var(--d-card-2) !important;
color: var(--d-text) !important;
border-color: var(--d-line) !important;
}
:root[data-theme="dark"] option { background-color: var(--d-card-2); color: var(--d-text); }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--d-faint); }
:root[data-theme="dark"] a { color: var(--d-accent); }
:root[data-theme="dark"] .hover\:bg-gray-200:hover { background-color: var(--d-card-2) !important; }
:root[data-theme="dark"] .hover\:text-white:hover { color: var(--d-text) !important; }
/* ---- header auth buttons ---- */
:root[data-theme="dark"] .reo-authbtn { background: var(--d-card-2); color: var(--d-text); border-color: var(--d-line); }
:root[data-theme="dark"] .reo-authbtn:hover { background: var(--d-line); }
:root[data-theme="dark"] .reo-authbtn--go { background: var(--d-accent); border-color: var(--d-accent); color: #0b1220; }
:root[data-theme="dark"] .reo-authbtn--go:hover { background: var(--d-accent-2); }
/* ---- notifications ---- */
:root[data-theme="dark"] #notificationsDropdown,
:root[data-theme="dark"] #dropdownMenu { background: var(--d-card) !important; border: 1px solid var(--d-line); }
:root[data-theme="dark"] .reo-notif { border-bottom-color: var(--d-line-soft); }
:root[data-theme="dark"] .reo-notif:hover { background: var(--d-card-2); }
:root[data-theme="dark"] .reo-notif--unread { background: rgba(91, 156, 255, .13); }
:root[data-theme="dark"] .reo-notif--unread:hover { background: rgba(91, 156, 255, .2); }
:root[data-theme="dark"] .reo-notif--unread .reo-notif-msg { color: var(--d-text); }
:root[data-theme="dark"] .reo-notif-msg { color: var(--d-text-2); }
:root[data-theme="dark"] .reo-notif-time,
:root[data-theme="dark"] .reo-notif-empty { color: var(--d-faint); }
:root[data-theme="dark"] .reo-notif-dot { background: var(--d-accent); }
:root[data-theme="dark"] .reo-notif-head { background: var(--d-head); border-bottom-color: var(--d-line); color: var(--d-muted); }
:root[data-theme="dark"] .reo-notif-head button { color: var(--d-accent); }
/* ---- my uploads ---- */
:root[data-theme="dark"] .mv-card { background: var(--d-card); border-color: var(--d-line); }
:root[data-theme="dark"] .mv-title, :root[data-theme="dark"] .mv-h2, :root[data-theme="dark"] .mv-name { color: var(--d-text); }
:root[data-theme="dark"] .mv-sub, :root[data-theme="dark"] .mv-meta { color: var(--d-muted); }
:root[data-theme="dark"] .mv-note { background: var(--d-card-2); color: var(--d-text-2); }
:root[data-theme="dark"] .mv-note--wait { background: rgba(251, 191, 36, .14); color: #fcd34d; }
:root[data-theme="dark"] .mv-note--bad { background: rgba(248, 113, 113, .14); color: #fca5a5; }
:root[data-theme="dark"] .mv-btn { background: var(--d-card-2); color: var(--d-text); border-color: var(--d-line); }
:root[data-theme="dark"] .mv-btn:hover { background: var(--d-line); }
:root[data-theme="dark"] .mv-btn--primary { background: var(--d-accent); border-color: var(--d-accent); color: #0b1220; }
:root[data-theme="dark"] .mv-btn--danger { color: var(--d-bad); border-color: rgba(248, 113, 113, .4); }
:root[data-theme="dark"] .mv-empty { border-color: var(--d-line); color: var(--d-muted); }
:root[data-theme="dark"] .mv-plan--free { background: var(--d-card-2); color: var(--d-text-2); }
/* ---- support ---- */
:root[data-theme="dark"] .sup-shell { background: var(--d-card); border-color: var(--d-line); color: var(--d-text); }
:root[data-theme="dark"] .sup-side { background: var(--d-head); border-right-color: var(--d-line); }
:root[data-theme="dark"] .sup-side-head, :root[data-theme="dark"] .sup-thead,
:root[data-theme="dark"] .sup-compose { border-color: var(--d-line); }
:root[data-theme="dark"] .sup-compose { background: var(--d-head); }
:root[data-theme="dark"] .sup-h1, :root[data-theme="dark"] .sup-h2,
:root[data-theme="dark"] .sup-item-sub, :root[data-theme="dark"] .sup-thead-title,
:root[data-theme="dark"] .sup-blank-h { color: var(--d-text); }
:root[data-theme="dark"] .sup-item { border-bottom-color: var(--d-line-soft); }
:root[data-theme="dark"] .sup-item:hover { background: var(--d-card-2); }
:root[data-theme="dark"] .sup-item.is-active { background: rgba(91, 156, 255, .14); }
:root[data-theme="dark"] .sup-bubble--in { background: var(--d-card-2); color: var(--d-text); }
:root[data-theme="dark"] .sup-bubble--out { background: var(--d-accent); color: #0b1220; }
:root[data-theme="dark"] .sup-typing { background: var(--d-card-2); }
:root[data-theme="dark"] .sup-input { background: var(--d-card-2); color: var(--d-text); border-color: var(--d-line); }
:root[data-theme="dark"] .sup-btn { background: var(--d-card-2); color: var(--d-text); border-color: var(--d-line); }
:root[data-theme="dark"] .sup-btn--primary { background: var(--d-accent); border-color: var(--d-accent); color: #0b1220; }
:root[data-theme="dark"] .sup-chip { background: var(--d-card-2); color: var(--d-text); border-color: var(--d-line); }
:root[data-theme="dark"] .sup-chip--go { background: var(--d-accent); border-color: var(--d-accent); color: #0b1220; }
:root[data-theme="dark"] .sup-dim, :root[data-theme="dark"] .sup-meta,
:root[data-theme="dark"] .sup-blurb { color: var(--d-muted); }
:root[data-theme="dark"] .sup-dev { background: var(--d-head); border-color: var(--d-line); }
:root[data-theme="dark"] .sup-attach-btn { background: var(--d-card-2); border-color: var(--d-line); color: var(--d-text-2); }
:root[data-theme="dark"] .sup-code { background: rgba(255, 255, 255, .1); }
:root[data-theme="dark"] .sup-pill--closed { background: var(--d-card-2); color: var(--d-muted); }
/* ---- starter designs ---- */
:root[data-theme="dark"] .tpl-card { background: var(--d-card); border-color: var(--d-line); }
:root[data-theme="dark"] .tpl-h1, :root[data-theme="dark"] .tpl-name { color: var(--d-text); }
:root[data-theme="dark"] .tpl-sub, :root[data-theme="dark"] .tpl-blurb,
:root[data-theme="dark"] .tpl-note, :root[data-theme="dark"] .tpl-credit { color: var(--d-muted); }
:root[data-theme="dark"] .tpl-frame { border-bottom-color: var(--d-line); }
:root[data-theme="dark"] .tpl-btn { background: var(--d-card-2); color: var(--d-text); border-color: var(--d-line); }
:root[data-theme="dark"] .tpl-btn--go { background: var(--d-accent); border-color: var(--d-accent); color: #0b1220; }
/* ---- the toggle itself ---- */
.reo-theme-btn {
background: transparent; border: 0; cursor: pointer; padding: 6px 8px;
color: #4b5563; font-size: 15px; line-height: 1;
}
.reo-theme-btn:hover { color: #111827; }
:root[data-theme="dark"] .reo-theme-btn { color: var(--d-muted); }
:root[data-theme="dark"] .reo-theme-btn:hover { color: var(--d-text); }
/* ---- pages that predate the token system and style themselves ---- */
/* profile */
:root[data-theme="dark"] .profile-shell { background: var(--d-card); border-color: var(--d-line); color: var(--d-text); }
:root[data-theme="dark"] .profile-soft { background: var(--d-card-2); border-color: var(--d-line); }
:root[data-theme="dark"] .profile-muted { color: var(--d-muted); }
:root[data-theme="dark"] .stat-box { background: var(--d-card-2); border-color: var(--d-line); color: var(--d-text); }
:root[data-theme="dark"] .secondary-btn { background: var(--d-card-2); color: var(--d-text); border-color: var(--d-line); }
:root[data-theme="dark"] .secondary-btn:hover { background: var(--d-line); }
:root[data-theme="dark"] .accent-link { color: var(--d-accent); }
:root[data-theme="dark"] .reo-vid-card { background: var(--d-card-2); }
/* browse */
:root[data-theme="dark"] .site-card { background: var(--d-card); border-color: var(--d-line); color: var(--d-text); }
:root[data-theme="dark"] .site-card:hover { border-color: var(--d-line-soft); }
:root[data-theme="dark"] .tag { background: var(--d-card-2); color: var(--d-text-2); border-color: var(--d-line); }
:root[data-theme="dark"] .img-placeholder,
:root[data-theme="dark"] .skeleton { background: var(--d-card-2); }
:root[data-theme="dark"] .advertisement-card { background: var(--d-card); border-color: var(--d-line); }
:root[data-theme="dark"] .cooldown-timer { background: var(--d-card-2); color: var(--d-text-2); }
/* settings, dashboard chrome, and anything else using these shared names */
:root[data-theme="dark"] .tab-btn { color: var(--d-muted); border-color: transparent; background: transparent; }
:root[data-theme="dark"] .tab-btn:hover { color: var(--d-text); background: var(--d-card-2); }
:root[data-theme="dark"] .tab-btn.active { color: var(--d-text); background: var(--d-card-2); border-color: var(--d-accent); }
:root[data-theme="dark"] .toggle-row { border-color: var(--d-line-soft); color: var(--d-text-2); }
:root[data-theme="dark"] .btn-primary { background: var(--d-accent); border-color: var(--d-accent); color: #0b1220; }
:root[data-theme="dark"] .btn-primary:hover { background: var(--d-accent-2); }
:root[data-theme="dark"] .btn-secondary { background: var(--d-card-2); color: var(--d-text); border-color: var(--d-line); }
:root[data-theme="dark"] .btn-secondary:hover { background: var(--d-line); }
:root[data-theme="dark"] .btn-danger { background: var(--d-bad); border-color: var(--d-bad); color: #1a0b0b; }
:root[data-theme="dark"] .card { background: var(--d-card); border-color: var(--d-line); }
:root[data-theme="dark"] .shell { background: transparent; }
:root[data-theme="dark"] .stat { background: var(--d-card); border-color: var(--d-line); color: var(--d-text); }
:root[data-theme="dark"] .badge-free { background: var(--d-card-2); color: var(--d-text-2); }
/* upgrade */
:root[data-theme="dark"] .plan-card .bg-white { background: var(--d-card) !important; }
:root[data-theme="dark"] .gradient-bg { background: var(--d-card) !important; border-color: var(--d-line) !important; }
/* anything that still hardcodes a white panel, catch it generically */
:root[data-theme="dark"] .shadow-md,
:root[data-theme="dark"] .shadow-lg,
:root[data-theme="dark"] .shadow-xl { box-shadow: 0 4px 16px rgba(0, 0, 0, .5) !important; }
:root[data-theme="dark"] hr { border-color: var(--d-line); }
:root[data-theme="dark"] code, :root[data-theme="dark"] pre { background: var(--d-card-2); color: var(--d-text); }
:root[data-theme="dark"] table { color: var(--d-text-2); }
:root[data-theme="dark"] th { color: var(--d-text); }
:root[data-theme="dark"] td, :root[data-theme="dark"] th { border-color: var(--d-line); }