/* ============================================================================
 * lumen-dark-hardened.css — Radical dark-mode contrast fix.
 * Yousef 2026-06-16: "كتير كلام ما عاد عم يصير مبين أو مقروء" — comprehensive fix.
 *
 * Strategy: override EVERY text color, background, border, and accent that uses
 * a cream/gold variable to use a high-contrast dark-mode value. We do this with
 * MAX SPECIFICITY (html[data-theme="dark"] body … !important) so it wins the
 * cascade against any per-page CSS or component CSS.
 * ========================================================================== */

html[data-theme="dark"] {
  /* Tokens — every cream variable becomes a dark surface */
  --jp-cream-100: #1A1D26 !important;  /* page background */
  --jp-cream-200: #232735 !important;  /* card background */
  --jp-cream-300: #2A2E3E !important;  /* alt section */
  --jp-cream-400: #3A3F52 !important;  /* borders */

  --jp-ink: #F5EFD8 !important;         /* primary text — warm cream */
  --jp-ink-soft: #C9C2A8 !important;    /* secondary text */
  --jp-ink-muted: #9A9485 !important;   /* tertiary text */

  /* Gold accents — keep but slightly brighter */
  --jp-gold-100: #4A3B14 !important;    /* darkest gold tint (was lightest) */
  --jp-gold-200: #8A6B1F !important;
  --jp-gold-300: #D4A843 !important;
  --jp-gold-400: #F4D77A !important;    /* brightest for emphasis */

  /* Rose, sage, sky, lav, peach — brighten so they pop on dark */
  --jp-rose-100: #3D1F22 !important;
  --jp-rose-200: #6B3438 !important;
  --jp-rose-300: #E89BA2 !important;
  --jp-rose-400: #F4BCC2 !important;

  --jp-sage-100: #1E2E1A !important;
  --jp-sage-200: #3D5234 !important;
  --jp-sage-300: #A8C385 !important;
  --jp-sage-400: #C8DCB0 !important;

  --jp-sky-100: #1A2738 !important;
  --jp-sky-200: #2D4660 !important;
  --jp-sky-300: #92BFE6 !important;
  --jp-sky-400: #BDD9F2 !important;

  --jp-lav-100: #2A1F3D !important;
  --jp-lav-200: #4D3B6B !important;
  --jp-lav-300: #C8B3E6 !important;

  --jp-peach-100: #3D2718 !important;
  --jp-peach-200: #6B4630 !important;
  --jp-peach-300: #FFBA92 !important;
  --jp-coral: #F4A78B !important;

  --jp-mint-100: #1A2E26 !important;
  --jp-mint-200: #2D5246 !important;

  --jp-butter: #4A3B14 !important;

  color-scheme: dark;
}

html[data-theme="dark"] body {
  background: var(--jp-cream-100) !important;
  color: var(--jp-ink) !important;
}

/* ─── Catch-all text — force readable colors on common text elements ────── */
html[data-theme="dark"] body p,
html[data-theme="dark"] body li,
html[data-theme="dark"] body span,
html[data-theme="dark"] body td,
html[data-theme="dark"] body label,
html[data-theme="dark"] body dd,
html[data-theme="dark"] body dt,
html[data-theme="dark"] body figcaption,
html[data-theme="dark"] body small {
  color: var(--jp-ink) !important;
}

html[data-theme="dark"] body h1,
html[data-theme="dark"] body h2,
html[data-theme="dark"] body h3,
html[data-theme="dark"] body h4,
html[data-theme="dark"] body h5,
html[data-theme="dark"] body h6 {
  color: var(--jp-ink) !important;
}

html[data-theme="dark"] body em,
html[data-theme="dark"] body i {
  color: var(--jp-ink-soft) !important;
}

html[data-theme="dark"] body strong,
html[data-theme="dark"] body b {
  color: var(--jp-gold-400) !important;
}

html[data-theme="dark"] body cite {
  color: var(--jp-ink-soft) !important;
}

html[data-theme="dark"] body a {
  color: var(--jp-gold-400) !important;
}
html[data-theme="dark"] body a:hover {
  color: var(--jp-gold-300) !important;
}

/* ─── Cards, sections, and surfaces ─────────────────────────────────────── */
html[data-theme="dark"] body .card,
html[data-theme="dark"] body .saint-card,
html[data-theme="dark"] body .icon-card,
html[data-theme="dark"] body .prayer-card,
html[data-theme="dark"] body .father-card,
html[data-theme="dark"] body .cat-card,
html[data-theme="dark"] body .word-card,
html[data-theme="dark"] body .hfh-card,
html[data-theme="dark"] body .walk-stop,
html[data-theme="dark"] body .altar-card,
html[data-theme="dark"] body .lectio-step,
html[data-theme="dark"] body .lectio-verse,
html[data-theme="dark"] body .story-card,
html[data-theme="dark"] body .stack-card,
html[data-theme="dark"] body .ethics-card,
html[data-theme="dark"] body .week-card,
html[data-theme="dark"] body .discern-card,
html[data-theme="dark"] body .prompt-card,
html[data-theme="dark"] body .workflow-card,
html[data-theme="dark"] body .tool-card,
html[data-theme="dark"] body .glossary-card,
html[data-theme="dark"] body .exam-card,
html[data-theme="dark"] body .quiz-card,
html[data-theme="dark"] body .hymnal-card,
html[data-theme="dark"] body .feast-row,
html[data-theme="dark"] body .cal-card,
html[data-theme="dark"] body .gallery-card,
html[data-theme="dark"] body .cpb-card,
html[data-theme="dark"] body .prayer-wall-card,
html[data-theme="dark"] body .memoriam-roll,
html[data-theme="dark"] body .color-card,
html[data-theme="dark"] body .scripture-frame,
html[data-theme="dark"] body details,
html[data-theme="dark"] body .lords-prayer__entry {
  background: var(--jp-cream-200) !important;
  border-color: var(--jp-cream-400) !important;
  color: var(--jp-ink) !important;
}

/* Card titles + kickers in dark */
html[data-theme="dark"] body .card__title,
html[data-theme="dark"] body .saint-card__name,
html[data-theme="dark"] body .icon-card__name,
html[data-theme="dark"] body .prayer-card__title,
html[data-theme="dark"] body .word-card__english,
html[data-theme="dark"] body .father-card__author,
html[data-theme="dark"] body .cat-card__question,
html[data-theme="dark"] body .hfh-card__title,
html[data-theme="dark"] body .walk-stop__name,
html[data-theme="dark"] body .altar-card__title,
html[data-theme="dark"] body .lectio-step__name,
html[data-theme="dark"] body .story-card__title,
html[data-theme="dark"] body .stack-card__cat,
html[data-theme="dark"] body .ethics-card__title,
html[data-theme="dark"] body .week-card__title,
html[data-theme="dark"] body .prompt-card__title,
html[data-theme="dark"] body .workflow-card__title,
html[data-theme="dark"] body .tool-card__name,
html[data-theme="dark"] body .glossary-card__term,
html[data-theme="dark"] body .exam-card__q,
html[data-theme="dark"] body .quiz-card__q,
html[data-theme="dark"] body .hymnal-card__title,
html[data-theme="dark"] body .cal-card__name,
html[data-theme="dark"] body .color-card__name,
html[data-theme="dark"] body .cpb-card__title {
  color: var(--jp-ink) !important;
}

html[data-theme="dark"] body .card__kicker,
html[data-theme="dark"] body .section__kicker,
html[data-theme="dark"] body .icon-card__kicker,
html[data-theme="dark"] body .saint-card__day,
html[data-theme="dark"] body .saint-card__meta,
html[data-theme="dark"] body .prayer-card__kicker,
html[data-theme="dark"] body .word-card__original,
html[data-theme="dark"] body .hfh-card__kicker,
html[data-theme="dark"] body .walk-stop__kicker,
html[data-theme="dark"] body .cat-card__num,
html[data-theme="dark"] body .week-card__num,
html[data-theme="dark"] body .story-card__kicker,
html[data-theme="dark"] body .feast-row__date,
html[data-theme="dark"] body .lords-prayer__note {
  color: var(--jp-gold-400) !important;
}

/* Body paragraphs inside cards */
html[data-theme="dark"] body .card__lede,
html[data-theme="dark"] body .section__lede,
html[data-theme="dark"] body .saint-card__story,
html[data-theme="dark"] body .icon-card__meaning,
html[data-theme="dark"] body .prayer-card__body,
html[data-theme="dark"] body .word-card__definition,
html[data-theme="dark"] body .father-card__quote p,
html[data-theme="dark"] body .cat-card__answer,
html[data-theme="dark"] body .hfh-card__lyrics,
html[data-theme="dark"] body .walk-stop__narration,
html[data-theme="dark"] body .altar-card p,
html[data-theme="dark"] body .lectio-step__body,
html[data-theme="dark"] body .story-card__body p,
html[data-theme="dark"] body .stack-card li,
html[data-theme="dark"] body .ethics-card li,
html[data-theme="dark"] body .week-card__summary,
html[data-theme="dark"] body .prompt-card__text,
html[data-theme="dark"] body .workflow-card__summary,
html[data-theme="dark"] body .workflow-card__steps li,
html[data-theme="dark"] body .tool-card__notes,
html[data-theme="dark"] body .glossary-card__plain,
html[data-theme="dark"] body .lords-prayer__text,
html[data-theme="dark"] body .memoriam-row,
html[data-theme="dark"] body .prayer-wall-card__text,
html[data-theme="dark"] body .letter-body {
  color: var(--jp-ink) !important;
}

/* Inner verse blocks */
html[data-theme="dark"] body .scripture-frame,
html[data-theme="dark"] body .saint-card__verse,
html[data-theme="dark"] body .icon-card__verse,
html[data-theme="dark"] body .prayer-card__verse,
html[data-theme="dark"] body .cat-card__verse,
html[data-theme="dark"] body .hfh-card__verse,
html[data-theme="dark"] body .word-card__verse,
html[data-theme="dark"] body .walk-stop__verse,
html[data-theme="dark"] body .lectio-verse,
html[data-theme="dark"] body .week-card__verse,
html[data-theme="dark"] body .hymnal-card__verse,
html[data-theme="dark"] body .cal-card__verse,
html[data-theme="dark"] body .exam-card__verse,
html[data-theme="dark"] body .father-card__quote {
  background: var(--jp-cream-300) !important;
  border-left-color: var(--jp-gold-400) !important;
}
html[data-theme="dark"] body .scripture-frame p,
html[data-theme="dark"] body .saint-card__verse p,
html[data-theme="dark"] body .icon-card__verse p,
html[data-theme="dark"] body .prayer-card__verse p,
html[data-theme="dark"] body .cat-card__verse p,
html[data-theme="dark"] body .hfh-card__verse p,
html[data-theme="dark"] body .word-card__verse p,
html[data-theme="dark"] body .walk-stop__verse p,
html[data-theme="dark"] body .lectio-verse__text,
html[data-theme="dark"] body .week-card__verse p,
html[data-theme="dark"] body .hymnal-card__verse p,
html[data-theme="dark"] body .cal-card__verse p,
html[data-theme="dark"] body .father-card__quote p {
  color: var(--jp-ink) !important;
}
html[data-theme="dark"] body .scripture-frame cite,
html[data-theme="dark"] body .saint-card__verse cite,
html[data-theme="dark"] body .icon-card__verse cite,
html[data-theme="dark"] body .prayer-card__verse cite,
html[data-theme="dark"] body .cat-card__verse cite,
html[data-theme="dark"] body .hfh-card__verse cite,
html[data-theme="dark"] body .word-card__verse cite,
html[data-theme="dark"] body .walk-stop__verse cite,
html[data-theme="dark"] body .lectio-verse__ref,
html[data-theme="dark"] body .week-card__verse cite,
html[data-theme="dark"] body .hymnal-card__verse cite,
html[data-theme="dark"] body .cal-card__verse cite {
  color: var(--jp-gold-400) !important;
}

/* Section titles */
html[data-theme="dark"] body .section__title {
  color: var(--jp-ink) !important;
}

/* Forms */
html[data-theme="dark"] body .field__input,
html[data-theme="dark"] body .field__textarea,
html[data-theme="dark"] body input,
html[data-theme="dark"] body textarea,
html[data-theme="dark"] body select {
  background: var(--jp-cream-200) !important;
  border-color: var(--jp-cream-400) !important;
  color: var(--jp-ink) !important;
}
html[data-theme="dark"] body input::placeholder,
html[data-theme="dark"] body textarea::placeholder {
  color: var(--jp-ink-muted) !important;
}

/* Buttons */
html[data-theme="dark"] body .btn,
html[data-theme="dark"] body button {
  color: var(--jp-ink) !important;
}
html[data-theme="dark"] body .btn-primary {
  background: var(--jp-gold-300) !important;
  color: #1A1D26 !important;
}
html[data-theme="dark"] body .btn-secondary {
  color: var(--jp-gold-400) !important;
  border-color: var(--jp-gold-300) !important;
}

/* Header + nav */
html[data-theme="dark"] body .site-header {
  background: var(--jp-cream-100) !important;
  border-color: var(--jp-cream-400) !important;
}
html[data-theme="dark"] body .nav-icon {
  color: var(--jp-ink) !important;
}
html[data-theme="dark"] body .nav-icon:hover {
  background: var(--jp-cream-200) !important;
}

/* Nav dropdown menus */
html[data-theme="dark"] body .nav-dropdown__menu {
  background: var(--jp-cream-200) !important;
  border-color: var(--jp-cream-400) !important;
}
html[data-theme="dark"] body .nav-dropdown__menu a {
  color: var(--jp-ink) !important;
}
html[data-theme="dark"] body .nav-dropdown__menu a:hover {
  background: var(--jp-cream-300) !important;
  color: var(--jp-gold-400) !important;
}

/* Footer */
html[data-theme="dark"] body .site-footer {
  background: var(--jp-cream-100) !important;
  color: var(--jp-ink) !important;
  border-top: 1px solid var(--jp-cream-400) !important;
}
html[data-theme="dark"] body .site-footer h4 { color: var(--jp-gold-400) !important; }
html[data-theme="dark"] body .site-footer a { color: var(--jp-ink) !important; }
html[data-theme="dark"] body .site-footer a:hover { color: var(--jp-gold-400) !important; }
html[data-theme="dark"] body .footer-verse,
html[data-theme="dark"] body .footer-signoff,
html[data-theme="dark"] body .footer-meta,
html[data-theme="dark"] body .footer-signature,
html[data-theme="dark"] body .footer-bless,
html[data-theme="dark"] body .signoff {
  color: var(--jp-ink-soft) !important;
}

/* Verse marquee */
html[data-theme="dark"] body .lumen-marquee-band--top,
html[data-theme="dark"] body .verse-marquee {
  background: var(--jp-sage-100) !important;
  border-top-color: var(--jp-cream-400) !important;
  border-bottom-color: var(--jp-cream-400) !important;
}
html[data-theme="dark"] body .lumen-marquee-band--top .lumen-marquee-band__track {
  color: var(--jp-gold-400) !important;
}

/* Modals */
html[data-theme="dark"] body .modal__panel {
  background: var(--jp-cream-200) !important;
  border-color: var(--jp-cream-400) !important;
  color: var(--jp-ink) !important;
}

/* Tooltips */
html[data-theme="dark"] body .tooltip,
html[data-theme="dark"] body .lumen-floating-tip {
  background: #F5EFD8 !important;
  color: #1A1D26 !important;
}

/* HR / dividers */
html[data-theme="dark"] body hr {
  border-color: var(--jp-cream-400) !important;
  background: linear-gradient(90deg, transparent, var(--jp-gold-300), transparent) !important;
}

/* Tables */
html[data-theme="dark"] body table {
  background: var(--jp-cream-200) !important;
  border-color: var(--jp-cream-400) !important;
  color: var(--jp-ink) !important;
}
html[data-theme="dark"] body th {
  background: var(--jp-cream-300) !important;
  color: var(--jp-gold-400) !important;
  border-color: var(--jp-cream-400) !important;
}
html[data-theme="dark"] body td {
  border-color: var(--jp-cream-400) !important;
}

/* Code blocks */
html[data-theme="dark"] body code,
html[data-theme="dark"] body pre {
  background: var(--jp-cream-300) !important;
  color: var(--jp-ink) !important;
  border-color: var(--jp-cream-400) !important;
}

/* Catch any element using the old text colors directly */
html[data-theme="dark"] body [style*="color: var(--jp-ink)"],
html[data-theme="dark"] body [style*="color: #2A2D38"],
html[data-theme="dark"] body [style*="color:#2A2D38"] {
  color: var(--jp-ink) !important;
}

/* Notice boxes / coloring page panels */
html[data-theme="dark"] body .story-card__coloring {
  background: var(--jp-peach-200) !important;
  color: var(--jp-ink) !important;
}
html[data-theme="dark"] body .story-card__coloring-label {
  color: var(--jp-peach-300) !important;
}

/* Discernment cards — bad/good halves */
html[data-theme="dark"] body .discern-card__half--bad {
  background: var(--jp-rose-100) !important;
  border-left-color: var(--jp-rose-300) !important;
}
html[data-theme="dark"] body .discern-card__half--good {
  background: var(--jp-sage-100) !important;
  border-left-color: var(--jp-sage-300) !important;
}
html[data-theme="dark"] body .discern-card__text,
html[data-theme="dark"] body .discern-card__lesson {
  color: var(--jp-ink) !important;
}
html[data-theme="dark"] body .discern-card__half--bad .discern-card__label {
  color: var(--jp-rose-300) !important;
}
html[data-theme="dark"] body .discern-card__half--good .discern-card__label {
  color: var(--jp-sage-300) !important;
}

/* Workflow red-flags box */
html[data-theme="dark"] body .workflow-card__flags {
  background: var(--jp-rose-100) !important;
  border-left-color: var(--jp-rose-300) !important;
}
html[data-theme="dark"] body .workflow-card__flags-label {
  color: var(--jp-rose-300) !important;
}
html[data-theme="dark"] body .workflow-card__flags li {
  color: var(--jp-ink) !important;
}

/* Quiz quiz-card good answer */
html[data-theme="dark"] body .quiz-card__good {
  background: var(--jp-sage-100) !important;
  border-left-color: var(--jp-sage-300) !important;
  color: var(--jp-sage-400) !important;
}
html[data-theme="dark"] body .quiz-card__explain {
  color: var(--jp-ink-soft) !important;
}

/* Checker — verdict rows + score */
html[data-theme="dark"] body .checker {
  background: var(--jp-cream-200) !important;
  border-color: var(--jp-cream-400) !important;
}
html[data-theme="dark"] body .checker__list li { color: var(--jp-ink) !important; }
html[data-theme="dark"] body [data-verdict-low] { background: var(--jp-rose-100) !important; color: var(--jp-ink) !important; }
html[data-theme="dark"] body [data-verdict-mid] { background: var(--jp-peach-100) !important; color: var(--jp-ink) !important; }
html[data-theme="dark"] body [data-verdict-high] { background: var(--jp-sage-100) !important; color: var(--jp-ink) !important; }

/* Liturgical color picker — keep swatches but darken their containers */
html[data-theme="dark"] body .lumen-accent-picker {
  background: var(--jp-cream-200) !important;
  border-color: var(--jp-cream-400) !important;
}
html[data-theme="dark"] body .lumen-accent-picker__toggle {
  background: var(--jp-cream-200) !important;
  border-color: var(--jp-cream-400) !important;
  color: var(--jp-gold-400) !important;
}
html[data-theme="dark"] body .lumen-accent-picker__swatch.is-active {
  border-color: var(--jp-gold-400) !important;
}

/* Subscribe form */
html[data-theme="dark"] body .subscribe-form-wrap {
  background: var(--jp-cream-200) !important;
  border-color: var(--jp-cream-400) !important;
}
html[data-theme="dark"] body .subscribe-form__note {
  color: var(--jp-gold-400) !important;
}

/* Force any inline styles that hardcoded dark text to be readable */
html[data-theme="dark"] body * { text-shadow: none !important; }