/* ─── Light mode defaults ─── */ :root { --bg-color: #ffffff; --bg-surface: #f8fafc; --bg-code: #f1f5f9; --text-color: #1a1a1a; --text-muted: #4a5568; --border-color: #e2e8f0; --link-color: #0066cc; } /* ─── Auto dark (system preference) ─── */ @media (prefers-color-scheme: dark) { :root { --bg-color: #121212; --bg-surface: #1e1e2e; --bg-code: #2a2a3e; --text-color: #f5f5f5; --text-muted: #a0aec0; --border-color: #3d3d56; --link-color: #4da6ff; } } /* ─── Manual dark override (class set by JS on or ) ─── */ html.dark-theme, body.dark-theme { --bg-color: #121212; --bg-surface: #1e1e2e; --bg-code: #2a2a3e; --text-color: #f5f5f5; --text-muted: #a0aec0; --border-color: #3d3d56; --link-color: #4da6ff; } /* ─── Manual light override (beats prefers-color-scheme: dark) ─── */ html.light-theme, body.light-theme { --bg-color: #ffffff; --bg-surface: #f8fafc; --bg-code: #f1f5f9; --text-color: #1a1a1a; --text-muted: #4a5568; --border-color: #e2e8f0; --link-color: #0066cc; } /* ─── Base elements ─── */ body { background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s ease, color 0.3s ease; } a { color: var(--link-color); } a:hover { color: var(--link-color); opacity: 0.85; } /* ─── Cards ─── */ .card, .card-body, .card-header { background-color: var(--bg-surface); border-color: var(--border-color); color: var(--text-color); } /* ─── Code / pre ─── */ pre, code { background-color: var(--bg-code); color: var(--text-color); } /* ─── Tables ─── */ .table td, .table th { border-color: var(--border-color); color: var(--text-color); } .table thead th { background-color: var(--bg-surface); border-color: var(--border-color); } /* ─── Footer ─── */ .footer { background-color: var(--bg-surface); color: var(--text-color); } /* ─── Forms ─── */ .form-control { background-color: var(--bg-color); color: var(--text-color); border-color: var(--border-color); } .form-control:focus { background-color: var(--bg-color); color: var(--text-color); } /* ─── Dropdowns ─── */ .dropdown-menu { background-color: var(--bg-surface); border-color: var(--border-color); } .dropdown-item { color: var(--text-color); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--bg-code); color: var(--text-color); } /* ─── List groups ─── */ .list-group-item { background-color: var(--bg-surface); border-color: var(--border-color); color: var(--text-color); } /* ─── Quiz component ───────────────────────────────────────────────────────── This block loads after the inline