/* ════════ Dark Mode — Feature-specific Overrides ════════
   NOTE: Variable overrides for dark mode live in tokens.css.
   This file holds [data-theme="dark"] rules that cannot be
   expressed through token overrides alone.

   TODO: Distribute rules into their respective feature CSS files
         (features/<name>/<name>.css) for true co-location.
         Kept as one file for safer incremental refactor.
   ════════════════════════════════════════════════════════════ */

/* ── Sidebar + Nav search (dark) ── */
[data-theme="dark"] .sidebar { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .nav-search-input { background: var(--surface); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .nav-search-input:focus { background: var(--card); }
[data-theme="dark"] .nav-search-kbd { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .nav-user:hover { background: var(--surface); }
[data-theme="dark"] .vocab-stat { background: var(--card); border-color: var(--border); }

/* ── Vocabulary ── */
[data-theme="dark"] .wc-level-tag.beginner    { background: var(--success-light); color: var(--success-text); }
[data-theme="dark"] .wc-level-tag.intermediate { background: var(--warning-light); color: var(--warning-text); }
[data-theme="dark"] .wc-level-tag.advanced    { background: var(--danger-light);  color: var(--danger-text); }

[data-theme="dark"] .wc-learn-btn { background: var(--card); border-color: var(--border); }

[data-theme="dark"] .wc-learn-btn:hover {
  background: var(--success-light);
  border-color: var(--success);
  color: var(--success-text);
}

[data-theme="dark"] .word-card.expanded {
  background: var(--primary-light);
  border-color: var(--primary);
}

/* ── Quiz / Practice ── */
[data-theme="dark"] .quiz-opt.correct { color: var(--success-text); }
[data-theme="dark"] .quiz-opt.wrong   { color: var(--danger-text); }

[data-theme="dark"] .wrong-item    { background: var(--danger-light); }
[data-theme="dark"] .wrong-word    { color: var(--danger-text); }
[data-theme="dark"] .wrong-meaning { color: var(--text-muted); }

/* ── Progress ── */
[data-theme="dark"] .streak-badge {
  background: linear-gradient(135deg, var(--warning-light), #78350F);
  border-color: var(--warning-text);
  color: var(--warning-text);
}

[data-theme="dark"] .badge-item.earned { background: var(--warning-light); }

/* ── Flashcard ── */
[data-theme="dark"] .flashcard-back {
  background: var(--surface);
  border-color: var(--border);
}

/* ── Buttons ── */
[data-theme="dark"] .btn-outline {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
}
[data-theme="dark"] .btn-outline:hover {
  background: color-mix(in srgb, var(--primary) 28%, transparent);
}

[data-theme="dark"] .btn-ghost { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .btn-ghost:hover { background: var(--surface); border-color: var(--text-muted); }

/* ── Dashboard hero ── */
[data-theme="dark"] .hero-cta-btn {
  background: var(--white-10);
  color: #fff;
  box-shadow: none;
}
[data-theme="dark"] .hero-cta-btn:hover { background: var(--white-20); }

/* ── FC done stats / again list ── */
[data-theme="dark"] .fc-done-stat.ok    { background: var(--success-light); color: var(--success-text); }
[data-theme="dark"] .fc-done-stat.again { background: var(--danger-light);  color: var(--danger-text); }
[data-theme="dark"] .fc-done-stat.score { background: var(--primary-light); color: var(--primary); }

[data-theme="dark"] .fc-again-item { background: var(--danger-light); }
[data-theme="dark"] .fc-ai-word    { color: var(--danger-text); }

[data-theme="dark"] .fc-speak-back       { background: var(--white-10); color: var(--text-muted); }
[data-theme="dark"] .fc-speak-back:hover { background: var(--white-20); }

/* ── Mode cards ── */
[data-theme="dark"] .mode-card         { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .mode-card.selected { background: var(--primary-light); border-color: var(--primary); }

/* ── Practice tags ── */
[data-theme="dark"] .srs-tag    { background: var(--primary-light); color: var(--primary); }
[data-theme="dark"] .recall-tag { background: var(--success-light); color: var(--success-text); }
[data-theme="dark"] .speed-tag  { background: var(--danger-light);  color: var(--danger-text); }
[data-theme="dark"] .weak-tag   { background: var(--warning-light); color: var(--warning-text); }

/* ── Count/qtype selectors ── */
[data-theme="dark"] .count-btn               { background: var(--card); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .count-btn.active        { background: var(--primary); border-color: var(--primary); color: #fff; }
[data-theme="dark"] .qtype-pill              { background: var(--card); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .qtype-pill.active       { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ── Typing ── */
[data-theme="dark"] .typing-input       { background: var(--card); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .typing-input:focus { background: var(--surface); }

[data-theme="dark"] .typing-feedback.fb-correct { background: var(--success-light); color: var(--success-text); }
[data-theme="dark"] .typing-feedback.fb-wrong   { background: var(--danger-light);  color: var(--danger-text); }
[data-theme="dark"] .typing-feedback.fb-typo    { background: var(--warning-light); color: var(--warning-text); }
[data-theme="dark"] .fb-requeue { color: var(--warning-text); }

/* ── Listen button ── */
[data-theme="dark"] .listen-btn       { background: var(--warning-light); border-color: var(--warning); color: var(--warning-text); }
[data-theme="dark"] .listen-btn:hover { background: var(--warning); color: #fff; }

/* ── Speed timer ── */
[data-theme="dark"] .speed-timer        { background: var(--primary-light); color: var(--primary); }
[data-theme="dark"] .speed-timer.urgent { background: var(--danger-light);  color: var(--danger-text); }