/* Global Dark Mode fixes — adaptive, maintainable, non-destructive
   Purpose: map static utility classes and headings to design tokens
   Usage: included on all pages; uses existing --text / --text-sub tokens
*/

/* Ensure headings use adaptive color tokens in dark mode */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6 {
  color: var(--text);
}

/* Semantic heading helpers (prefer these in templates going forward) */
.heading { color: var(--text); font-weight:700; }
.text-primary { color: var(--text); }
.text-secondary { color: var(--text-sub); }
.text-muted { color: var(--text-muted); }
:root[data-theme="dark"] .section-title,
:root[data-theme="dark"] .module-name,
:root[data-theme="dark"] .chapter-title,
:root[data-theme="dark"] .reader-title,
:root[data-theme="dark"] .hero-title,
:root[data-theme="dark"] .qcm-title-block h3,
:root[data-theme="dark"] .lesson-content h2,
:root[data-theme="dark"] .lesson-content h3,
:root[data-theme="dark"] .qsc-title,
:root[data-theme="dark"] .tc-title,
:root[data-theme="dark"] .welcome-text h1,
:root[data-theme="dark"] .pack-title,
:root[data-theme="dark"] .hge-lesson-title,
:root[data-theme="dark"] .qcm-question-text,
:root[data-theme="dark"] .mes-section-title,
:root[data-theme="dark"] .lv2-section-title,
:root[data-theme="dark"] .lv2-subsection-title,
:root[data-theme="dark"] .mc-name,
:root[data-theme="dark"] .news-title,
:root[data-theme="dark"] .sec-title,
:root[data-theme="dark"] .sec-head .sec-title,
:root[data-theme="dark"] #ch-section-title,
:root[data-theme="dark"] .chapter-list h3,
:root[data-theme="dark"] .bloc-title,
:root[data-theme="dark"] .block-title,
:root[data-theme="dark"] .module-title,
:root[data-theme="dark"] .chapters-title {
  color: var(--text);
}
.heading-lg { font-size:1.6rem; }
.heading-md { font-size:1.25rem; }
.heading-sm { font-size:1rem; }

/* Map common Tailwind-like utilities to tokens so static classes remain readable */
:root[data-theme="dark"] .text-slate-900,
:root[data-theme="dark"] .text-slate-800,
:root[data-theme="dark"] .text-slate-700,
:root[data-theme="dark"] .text-slate-600,
:root[data-theme="dark"] .text-slate-500,
:root[data-theme="dark"] .text-black,
:root[data-theme="dark"] .font-black {
  color: var(--text);
}

:root[data-theme="dark"] .text-slate-400,
:root[data-theme="dark"] .text-slate-300,
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .text-slate-500-muted {
  color: var(--text-sub);
}

/* Force link/strong to remain visible */
:root[data-theme="dark"] a,
:root[data-theme="dark"] strong {
  color: var(--text);
}

/* For components that rely on .bg-white in light mode, ensure text contrasts */
:root[data-theme="dark"] .bg-white { background: var(--surface); }

/* IMPORTANT: Inline style="color:#000" cannot be overridden without !important.
   Prefer replacing inline styles with CSS variables in templates. */

/* End of dark-mode.css */

/* Broad override: force all textual content to the adaptive text token
   in dark mode. This intentionally uses !important to override legacy
   inline styles and utility classes that set hard colors. */
:root[data-theme="dark"] body,
:root[data-theme="dark"] body * {
  color: var(--text) !important;
}