/* Production readability pass: high-contrast text without changing product scope. */
:root {
  --mwo-readable-dark: #102033;
  --mwo-readable-muted: #334155;
  --mwo-readable-light: #f8fafc;
  --mwo-readable-soft: #eaf3ff;
  --mwo-blue: #0d4a9c;
  --mwo-dark-blue: #0a3a7a;
  --mwo-gold: #f5b942;
}

body {
  color: var(--mwo-readable-dark);
}

header,
.site-header,
.navbar,
.hero,
.card-header,
.conversation-header,
.slide-card {
  color: var(--mwo-readable-light);
}

header h1,
header a,
nav a,
.site-header h1,
.navbar a,
.hero h1,
.hero h2,
.conversation-header h1,
.conversation-header h2,
.conversation-header h3,
.slide-card h1,
.slide-card h2,
.slide-title {
  color: #ffffff;
}

.dropdown-menu,
.dropdown-menu a,
.dropdown-item {
  color: #ffffff;
}

.dropdown-item:hover,
.dropdown-item.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
}

.tool-description,
.feature-description,
.card p,
.result-container p,
.lesson-content p,
.setup-container p,
.conversation-interface p,
.story-content-container p {
  color: var(--mwo-readable-muted);
}

.tool-header .tool-description,
.voice-selection h3,
.form-label,
label,
.feature-title,
.lesson-heading,
.pos-title,
.section-title {
  color: var(--mwo-blue);
}

.ar-translation,
.ar-example,
.arabic-translation,
.arabic-text,
[dir="rtl"] {
  color: #17351f;
}

button,
.btn,
.start-button,
.nav-btn,
.practice-btn,
#generateBtn,
#searchButton,
#submitBtn {
  color: #ffffff;
}

button:disabled,
.btn:disabled,
.start-button:disabled {
  color: #1f2937;
  opacity: 0.75;
}

.voice-option,
.character-card,
.feature-card,
.level-button {
  color: var(--mwo-readable-dark);
}

.voice-option.selected,
.character-card.selected,
.level-button.selected,
.feature-card.selected {
  color: #082f5f;
  border-color: var(--mwo-gold);
  background: #eef6ff;
}

.coming-soon-container,
.proposal-card,
.coming-soon-panel {
  color: var(--mwo-readable-dark);
}

.text-muted,
.muted,
.subtitle,
.description,
small {
  color: #475569;
}

/* Word Wizard result hero/header, including dynamically generated cards. */
#results .card-header {
  background: linear-gradient(135deg, var(--mwo-blue), var(--mwo-dark-blue));
  color: #ffffff;
}

#results .card-header h2 {
  color: #ffffff !important;
  font-weight: 900;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

#results .card-header .pos-summary,
#results .card-header .pos-summary strong {
  color: #f8fafc !important;
}

#results .card-header a.part-of-speech {
  color: #082f5f !important;
  background: var(--mwo-gold) !important;
  border: 1px solid rgba(255, 255, 255, 0.45);
}