:root {
  color-scheme: dark;
  color: #ececf1;
  background: #121318;
}

body {
  background: radial-gradient(circle at 92% 2%, #232536 0, transparent 34%), #121318;
}

::selection { background: #bfc1f1; color: #171824; }

.topbar, footer, .how-it-works { border-color: #343641; }
.brand-mark { background: #d2d3ee; color: #171825; }
.brand-mark span { color: #7375aa; }
.topbar-note, .intro, .how-it-works, .done-card p:not(.section-kicker) { color: #adaeba; }
.note-dot, .eyebrow-line { background: #bfc1ea; }
.eyebrow, .hero-copy h1 em, .section-kicker, .card-kicker { color: #c3c4f2; }
.step-number { color: #b9b9e9; }
footer, .chooser-hint, .queue-note, .input-hint { color: #9294a3; }

.chooser-card, .flashcard, .done-card {
  background: #1d1f27;
  border-color: #373945;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .28);
}

.count-badge { color: #d8d8ef; background: #333544; }
.category-option { color: #ececf1; background: #252731; border-color: #424450; }
.category-option:hover { border-color: #a6a8d9; background: #2c2e3b; }
.category-option.selected { background: #34364b; border-color: #b6b8e8; }
.category-icon { color: #d7d8f3; background: #393c4d; }
.category-option.selected .category-icon { background: #515476; }
.category-copy strong { color: #eeeef5; }
.category-copy small { color: #aaabb8; }
.category-check { border-color: #828595; }
.category-option.selected .category-check { color: #171824; background: #c2c4f0; border-color: #c2c4f0; }

.primary-button, .check-button { color: #191a28; background: #c4c5ef; }
.primary-button:hover, .check-button:hover { background: #d9d9fa; }
.primary-button:disabled { color: #aaabb9; background: #41434f; }
.text-button { color: #c0c1eb; }
.text-button:hover { color: #e2e2fb; }
.quiz-category { color: #b9bae0; }
.progress-labels { color: #aeb0bb; }
.progress-labels strong { color: #eeeef4; }
.progress-track { background: #3b3d4c; }
.progress-track > div { background: #c2c4ef; }

.card-decor { color: #282a37; }
.card-decor span { color: #323444; }
.card-divider { background: #393b48; }
label { color: #d4d5e4; }
.input-row input { color: #f3f3f8; background: #171922; border-color: #555766; }
.input-row input::placeholder { color: #9698aa; opacity: 1; }
.input-row input:focus { border-color: #babced; box-shadow: 0 0 0 3px #3f405d; }
.input-row input:disabled { color: #cbccd8; background: #292b36; }
.check-button:disabled { opacity: .55; }

.feedback.correct { color: #e4e5ff; background: #30354b; }
.feedback.incorrect { color: #ffdad0; background: #493035; }
.feedback-extra { color: #c5c7ed; }
.feedback.incorrect .feedback-extra { color: #ebada4; }
.done-icon { color: #e5e6ff; background: #3c3e5b; }
:focus-visible { outline-color: #d5d5ff; }