/* ============================================================
   WORDS.EXPERT — Theme patch (teal · cream · lime)
   Drop-in stylesheet. Include AFTER css/style.css:

     <link rel="stylesheet" href="css/style.css?v=13" />
     <link rel="stylesheet" href="css/theme-bright.css?v=1" />

   Light theme only. Overrides palette, gradients, radii, logo,
   and selected component looks across Dashboard, Learn, Review,
   Dictionary, Stats.
   ============================================================ */

/* ---------- 1. Core palette ---------- */
:root {
  --bg:       #F3F7ED;
  --bg2:      #FFFFFF;
  --bg3:      #E8EFE0;

  --border:   rgba(15,42,36,0.10);

  --text:     #0F2A24;
  --text2:    #3F574F;
  --text3:    #86948B;

  --accent:       #0FA98B;
  --accent2:      #0C8C72;
  --accent-glow:  rgba(15,169,139,0.14);

  --green:    #0FA98B;
  --red:      #E5483D;
  --yellow:   #D9A23B;
  --blue:     #3B6FE0;
  --purple:   #0FA98B;    /* alias to accent — no more violet */
  --lime:     #C8EC4F;    /* new pop accent for highlights */
  --teal-dark:#1A6562;    /* hero / word-of-day bg */

  --shadow:    0 2px 12px rgba(15,42,36,0.05);
  --shadow-lg: 0 10px 32px rgba(15,42,36,0.10);

  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 22px;

  --transition: 0.18s ease;
}

/* Disable dark mode entirely — keep light tokens even if .dark class is applied */
body.dark {
  --bg:       #F3F7ED;
  --bg2:      #FFFFFF;
  --bg3:      #E8EFE0;
  --border:   rgba(15,42,36,0.10);
  --text:     #0F2A24;
  --text2:    #3F574F;
  --text3:    #86948B;
  --accent:       #0FA98B;
  --accent2:      #0C8C72;
  --accent-glow:  rgba(15,169,139,0.14);
  --shadow:    0 2px 12px rgba(15,42,36,0.05);
  --shadow-lg: 0 10px 32px rgba(15,42,36,0.10);
}

/* ---------- 2. Typography ---------- */
body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  letter-spacing: -0.005em;
}

/* ---------- 3. Logo ---------- */
.logo-words  {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--text);
  letter-spacing: -0.03em;
  text-transform: lowercase;
}
.logo-dot {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--text);
}
.logo-expert {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--text);
  -webkit-text-stroke: 0;
  letter-spacing: -0.03em;
  text-transform: lowercase;
}

/* ---------- 4. Nav ---------- */
.nav {
  background: var(--bg);
  border-bottom: none;
  box-shadow: none;
}

.nav-btn {
  font-weight: 600;
  border-radius: 999px;
  padding: 7px 16px;
  color: var(--text2);
}
.nav-btn:hover { background: var(--bg3); color: var(--text); }
.nav-btn.active {
  background: var(--text);
  color: #fff;
}

.lang-toggle  { background: var(--bg3); border: 1px solid var(--border); border-radius: 999px; }
.lang-btn     { border-radius: 999px; }
.lang-btn.active { background: var(--accent); color: #fff; }

.theme-btn, .voice-btn, .settings-btn {
  border-radius: 10px;
  background: var(--bg3);
  border-color: var(--border);
}
.theme-btn:hover, .voice-btn:hover, .settings-btn:hover {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--accent);
}

/* ---------- 5. Buttons ---------- */
.btn          { border-radius: var(--radius-sm); font-weight: 600; }
.btn-large    { border-radius: var(--radius); padding: 14px 26px; }

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: none;
  transition: filter 0.12s ease;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { filter: brightness(0.95); }

.btn-secondary {
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-ghost { color: var(--text2); }
.btn-ghost:hover { background: var(--bg3); color: var(--text); }

/* nav add button */
.nav-add-btn {
  border-radius: 999px;
  padding: 7px 16px;
  box-shadow: none;
}

/* ---------- 6. Dashboard ---------- */
.dash-greeting h1 {
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.05;
}

.dash-prog-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: none;
}

.dash-prog-val { font-weight: 800; font-size: 44px; letter-spacing: -1.5px; }
.dash-prog-bar { height: 8px; background: var(--bg3); border-radius: 999px; }
.dash-prog-fill { border-radius: 999px; }
.dash-prog-fill-green  { background: var(--accent); }
.dash-prog-fill-blue   { background: var(--blue); }
.dash-prog-fill-accent { background: var(--lime); }

.dash-activity-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  box-shadow: none;
}

.dash-activity-header {
  text-transform: none;
  letter-spacing: -0.005em;
  font-weight: 700;
  color: var(--text);
  font-size: 14px;
}

.dash-streak-badge {
  background: var(--accent-glow);
  color: var(--accent);
  border-radius: 999px;
  padding: 4px 12px;
}

/* Word of the day card — distinctive teal hero */
#dash-wotd {
  background: var(--teal-dark);
  border: 0;
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: none;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}

#dash-wotd::after {
  content: '';
  position: absolute;
  right: -50px; bottom: -50px;
  width: 220px; height: 220px;
  border-radius: 50%;
  border: 2px dashed var(--lime);
  opacity: 0.30;
  pointer-events: none;
}

#dash-wotd .wotd-quote-label { color: var(--lime); }
#dash-wotd .wotd-quote-icon { color: var(--lime); opacity: 0.6; }

/* ---------- 7. Cards (study / learn) ---------- */
.study-card, .learn-card, .examples-sidebar {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.study-card::before, .study-card::after { display: none !important; }

.card-mode-badge {
  background: var(--accent-glow);
  color: var(--accent);
  border-radius: 999px;
}

.card-prompt {
  text-transform: none;
  letter-spacing: -0.005em;
  font-weight: 700;
  color: var(--text2);
  font-size: 14px;
}

.card-word { font-weight: 800; letter-spacing: -0.5px; }
.card-translation { color: var(--accent); font-weight: 700; }

.card-example {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.card-tag, .word-tag, .wotd-tag, .pos-chip {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0;
}
.pos-chip {
  background: var(--accent-glow);
  color: var(--accent);
  border: 1px solid transparent;
}

/* ---------- 8. Letter picker (Learn) ---------- */
.letter-slot {
  border-radius: 10px;
  background: #fff;
  border-color: var(--border);
}
.letter-slot.active {
  background: #fff;
}
.letter-slot.filled {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.letter-slot.correct {
  background: #fff;
  border-color: transparent;
  color: var(--text);
}
.letter-slot.incorrect {
  background: rgba(229,72,61,0.10);
  border-color: var(--red);
  color: var(--red);
}

.letter-tile {
  border-radius: 10px;
  background: var(--bg2);
  box-shadow: 0 2px 0 rgba(15,42,36,0.08);
}
.letter-tile:hover {
  border-color: var(--accent);
  background: var(--accent-glow);
}
.letter-tile.hint {
  border-color: var(--accent);
  background: rgba(15,169,139,0.10);
}

/* ---------- 9. Listen button — keep round but on accent ---------- */
.listen-btn {
  background: var(--accent);
  box-shadow: none;
  color: #fff;
}
.listen-btn:hover { filter: brightness(1.08); }

/* ---------- 10. Rating buttons (Review) ---------- */
.rating-btn       { border-radius: var(--radius); font-weight: 700; box-shadow: none; }
.rating-btn:hover { filter: brightness(1.06); }
.rating-btn.again { background: var(--red);    color: #fff; }
.rating-btn.hard  { background: var(--yellow); color: #1a1a1a; }
.rating-btn.good  { background: var(--accent); color: #fff; }
.rating-btn.easy  { background: var(--blue);   color: #fff; }

/* ---------- 11. Progress bar ---------- */
.progress-bar  { height: 10px; border-radius: 999px; background: var(--bg3); border: 0; }
.progress-fill { background: var(--accent); border-radius: 999px; }

/* ---------- 12. Reveal & typing ---------- */
.btn-reveal {
  background: var(--bg3);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text2);
}
.btn-reveal:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

.typing-input {
  background: var(--bg3);
  border-radius: var(--radius);
  font-weight: 700;
}
.typing-input:focus { border-color: var(--accent); background: var(--bg2); }
.typing-input.correct  { border-color: var(--accent); background: rgba(15,169,139,0.06); }
.typing-input.incorrect { border-color: var(--red);   background: rgba(229,72,61,0.06); }

.answer-feedback.correct   { color: var(--accent); background: rgba(15,169,139,0.10); border-color: rgba(15,169,139,0.30); }
.answer-feedback.incorrect { color: var(--red);    background: rgba(229,72,61,0.10);  border-color: rgba(229,72,61,0.30); }

/* ---------- 13. Multiple choice ---------- */
.choice-btn {
  background: var(--bg2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.choice-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-glow);
}
.choice-btn.correct { border-color: var(--accent); background: rgba(15,169,139,0.10); color: var(--accent); }
.choice-btn.wrong   { border-color: var(--red);    background: rgba(229,72,61,0.10);  color: var(--red); }

/* ---------- 14. Results ---------- */
.result-item {
  background: var(--bg2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: none;
  padding: 28px 18px;
}
.result-item.correct { border-top: 3px solid var(--accent); }
.result-item.wrong   { border-top: 3px solid var(--red); }
.result-number       { color: var(--accent); font-weight: 800; }
.result-item.correct .result-number { color: var(--accent); }
.result-item.wrong   .result-number { color: var(--red); }

/* ---------- 15. Dictionary ---------- */
.dictionary-header h1 {
  font-weight: 800;
  letter-spacing: -1px;
  font-size: 44px;
}

.input, .select {
  background: var(--bg2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-weight: 500;
}
.input:focus, .select:focus { border-color: var(--accent); background: var(--bg2); }

.word-item {
  background: var(--bg2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.word-item:hover    { border-color: var(--accent); box-shadow: var(--shadow); }
.word-item.expanded { border-color: var(--accent); box-shadow: var(--shadow); }

.word-item-detail {
  background: #F0F6FF;
  border-top: 1px solid var(--border);
}

.word-tag, .detail-pos-badge {
  border-radius: 999px;
  font-weight: 600;
}
.word-tag {
  background: var(--bg3);
  color: var(--text2);
  border-color: var(--border);
}

.level-new      { background: rgba(15,169,139,0.12); color: var(--accent); }
.level-learning { background: rgba(217,162,59,0.14); color: var(--yellow); }
.level-review   { background: rgba(59,111,224,0.12); color: var(--blue); }
.level-mature   { background: rgba(15,169,139,0.18); color: var(--accent2); }

.action-btn {
  border-radius: 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
}
.action-btn:hover        { background: var(--accent); border-color: var(--accent); color: #fff; }
.action-btn.delete:hover { background: var(--red);    border-color: var(--red); }

.row-speak-btn {
  background: var(--bg3);
  border-color: var(--border);
  color: var(--accent);
}
.row-speak-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.card-speak-btn { background: var(--bg3); border-color: var(--border); color: var(--accent); }
.card-speak-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* SRS dots */
.srs-dot-new      { background: var(--accent); border-color: var(--accent); }
.srs-dot-learning { background: var(--yellow); border-color: var(--yellow); }
.srs-dot-review   { background: var(--blue);   border-color: var(--blue); }
.srs-dot-mature   { background: var(--accent2); border-color: var(--accent2); }

/* ---------- 16. Stats ---------- */
.page-title {
  font-weight: 800;
  letter-spacing: -1px;
  font-size: 44px;
  color: var(--text);
}

.stats-tile {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: 28px 20px;
}
.stats-tile-value { font-weight: 800; font-size: 36px; letter-spacing: -1px; }

.stats-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: 24px;
}

.stats-section-title {
  text-transform: none;
  letter-spacing: -0.005em;
  font-weight: 700;
  color: var(--text);
  font-size: 14px;
}

.stats-word-row {
  background: #F0F6FF;
  border: 1px solid rgba(59,130,246,0.15);
  border-radius: var(--radius-sm);
}
.stats-lapse-badge {
  background: rgba(229,72,61,0.12);
  color: var(--red);
  border-radius: 999px;
}

/* Heatmap recolor (teal scale) */
.heatmap-day      { border-radius: 4px; }
.heat-0 { background: var(--bg3); }
.heat-1 { background: rgba(15,169,139,0.18); }
.heat-2 { background: rgba(15,169,139,0.38); }
.heat-3 { background: rgba(15,169,139,0.58); }
.heat-4 { background: rgba(15,169,139,0.78); }
.heat-5 { background: var(--accent); }

/* Level chart */
.level-bar-wrap { background: var(--bg3); border: 1px solid var(--border); border-radius: 999px; }
.level-bar      { border-radius: 999px; }
.level-bar.new      { background: var(--accent); }
.level-bar.learning { background: var(--yellow); }
.level-bar.review   { background: var(--blue); }
.level-bar.mature   { background: var(--accent2); }

.tag-progress-count { color: var(--accent); }

/* ---------- 17. Modals ---------- */
.modal-content {
  border-radius: var(--radius-lg);
  background: var(--bg2);
  border: 1px solid var(--border);
}

/* ---------- 18. Cambridge link ---------- */
.cambridge-link {
  background: var(--bg3);
  border-color: var(--border);
  border-radius: 999px;
}
.cambridge-link:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-glow); }

/* ---------- 19. Auth ---------- */
.auth-card {
  background: var(--bg2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.auth-logo .logo-words   { font-weight: 800; }
.auth-logo .logo-expert  { font-weight: 800; color: var(--text); }

/* ---------- 20. Misc cleanup ---------- */
[style*="linear-gradient(135deg, var(--accent), var(--purple))"] {
  background: var(--accent) !important;
}

/* ---------- 21. Hide elements not in design ---------- */
.lang-toggle,
#btn-feedback,
#btn-voice,
#btn-settings,
#btn-theme,
#btn-nav-add {
  display: none !important;
}