/* Dyslexia-Friendly Mode — global overrides */
/* WCAG-aligned readability: softer background, higher line/word spacing, readable fonts, reduced motion */

/* 1) Base palette and typography */
body.dyslexia-mode {
  --background-color: #eae6d9 !important;
  --surface-color: #f1ede2 !important;
  --text-color: #222222 !important;
  --accent-color: #0b57d0 !important; /* readable blue */
  --border-color: #b6b0a1 !important;

  font-family: 'Lexend', 'OpenDyslexic', Arial, Verdana, 'Comic Sans MS', sans-serif !important;
  letter-spacing: 0.03em;
  line-height: 1.6;
  background-color: #eae6d9 !important;
  color: #222 !important;
  background-image: none !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.dyslexia-mode a {
  color: #0b57d0 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Headings use the same readable family with moderate weight */
body.dyslexia-mode h1,
body.dyslexia-mode h2,
body.dyslexia-mode h3,
body.dyslexia-mode h4,
body.dyslexia-mode h5,
body.dyslexia-mode h6 {
  font-family: 'Lexend', 'OpenDyslexic', Arial, Verdana, 'Comic Sans MS', sans-serif !important;
  color: #111 !important;
  letter-spacing: 0.01em;
}

/* 2) Text blocks, lists, and content width */
body.dyslexia-mode main p,
body.dyslexia-mode main li,
body.dyslexia-mode main dd,
body.dyslexia-mode main dt,
body.dyslexia-mode main blockquote,
body.dyslexia-mode main pre,
body.dyslexia-mode .smallnote {
  line-height: 1.8 !important;
  word-spacing: 0.16em !important;
  letter-spacing: 0.03em !important;
  text-align: left !important;
  max-width: 80ch;
}

/* Avoid fully justified text */
body.dyslexia-mode p,
body.dyslexia-mode li {
  text-align: left !important;
}

/* 3) UI surfaces and cards */
body.dyslexia-mode .card,
body.dyslexia-mode .category-card,
body.dyslexia-mode .profile-card,
body.dyslexia-mode .profile-section,
body.dyslexia-mode header,
body.dyslexia-mode footer,
body.dyslexia-mode .cookie-banner,
body.dyslexia-mode .feedback-modal {
  background-color: var(--surface-color) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
  box-shadow: none !important;
}

/* Progress bars, borders, and accents */
body.dyslexia-mode .progress-outer {
  background: #e8e4d9 !important;
  border-color: var(--border-color) !important;
}
body.dyslexia-mode .progress-inner {
  background: var(--accent-color) !important;
}

/* Inputs and buttons */
body.dyslexia-mode input[type="text"],
body.dyslexia-mode input[type="number"],
body.dyslexia-mode input[type="email"],
body.dyslexia-mode input[type="password"],
body.dyslexia-mode select,
body.dyslexia-mode textarea {
  background: #fff !important;
  color: #222 !important;
  border-color: var(--border-color) !important;
}

body.dyslexia-mode button,
body.dyslexia-mode .button,
body.dyslexia-mode .feedback-button {
  border-color: var(--border-color) !important;
  background: var(--accent-color) !important;
  color: #fff !important;
}

/* Links in footer and nav */
body.dyslexia-mode footer a,
body.dyslexia-mode nav a {
  color: #0b57d0 !important;
}

/* 4) Reduced motion */
body.dyslexia-mode *,
body.dyslexia-mode *::before,
body.dyslexia-mode *::after {
  animation: none !important;
  transition: none !important;
}

/* 5) Improved focus visibility */
body.dyslexia-mode :focus-visible {
  outline: 2px dashed #0b57d0 !important;
  outline-offset: 2px !important;
}

/* 6) Images: reduce heavy drop shadows for clarity */
body.dyslexia-mode img {
  filter: none !important;
}

/* 7) Utility: readable toggle button adjustments while in mode */
body.dyslexia-mode #toggle-dyslexia.a11y-toggle {
  background: #0b57d0 !important;
  color: #fff !important;
  border-color: #0b57d0 !important;
}

/* 8) Tables */
body.dyslexia-mode table,
body.dyslexia-mode th,
body.dyslexia-mode td {
  border-color: var(--border-color) !important;
}

/* 9) Avoid overly narrow grid gaps */
@media (max-width: 640px) {
  body.dyslexia-mode .kpis { gap: 12px !important; }
}

/* 10) Ensure max contrast on essential status badges */
body.dyslexia-mode .completed-badge {
  background: #e6f4ea !important;
  color: #137333 !important;
  border-color: #8fd19e !important;
}