/* ── LIGHT READING THEME (hybrid) ─────────────────────────────
   Loaded after the page stylesheet on reading-heavy pages only.
   Remaps the palette to warm paper for the reading surface, then
   re-pins the original dark palette on brand chrome: nav, heroes,
   footer, CTA blocks, and the MCL hover card. */

:root {
  --bg:       #f6f3ec;
  --surface:  #fffdf8;
  --raised:   #eee9df;
  --border:   #ddd7c9;
  --red:      #b03427;
  --red-dark: #952b20;
  --white:    #22221f;   /* primary text */
  --muted:    #565650;   /* body text */
  --light:    #3a3a35;   /* emphasis text */
}

/* ── Dark islands: restore the original dark variable set ── */
nav, footer, .footer-simple,
.blog-hero, .page-hero, .page-header,
.why-section, .cta-section, .art-cta,
.mcl-card {
  --bg:       #212124;
  --surface:  #2a2a2d;
  --raised:   #333337;
  --border:   #424247;
  --red:      #c0392b;
  --red-dark: #a93226;
  --white:    #f0f0ed;
  --muted:    #9a9a9e;
  --light:    #c8c8c4;
}

/* Heroes keep their dark surface (their bg uses the remapped vars) */
.blog-hero, .page-hero, .page-header {
  background: #2a2a2d;
  border-bottom: 1px solid #424247;
  background-image: linear-gradient(135deg, rgba(192,57,43,0.08) 0%, transparent 40%, rgba(192,57,43,0.04) 100%);
}

/* CTA blocks stay dark */
.cta-section { background: #232326; border-top: 1px solid #424247; }
.art-cta { background: #2a2a2d; border: 1px solid #424247; }
.art-cta h3, .art-cta .cta-title { color: #f0f0ed; }

/* Sections whose dark backgrounds were hardcoded → lighten */
.services-section { background: transparent; border-top: 1px solid var(--border); }
.pillar-section { background: var(--raised); border-top: 1px solid var(--border); }

/* Cards: soften dark-tuned shadows, keep lift on hover */
.pillar-card, .article-card, .related-pillar, .quick-answer, .callout, .why-cell {
  box-shadow: 0 1px 3px rgba(30, 25, 10, 0.05);
}
.pillar-card:hover, .article-card:hover, .related-pillar:hover {
  box-shadow: 0 10px 26px rgba(30, 25, 10, 0.10);
}

/* Body text: slightly heavier weight reads better dark-on-light */
.art-body p, .art-body li, .service-item p, .faq-a { color: #45453f; }

/* Table borders on light */
.judge-table th { border-bottom-color: #c9c2b2; }

/* MCL hover card keeps its dark styling (bg already hardcoded) */

/* Reading progress bar: keep red, add subtle track separation */
.read-progress { box-shadow: 0 1px 2px rgba(0,0,0,0.12); }