/* oapf-contrast.css — contrast safety net, loaded last.
 * Consumes --mode-* tokens from oapf-modes.css.
 * Keeps legacy body.dark-mode selectors as fallback for any page
 * not yet covered by oapf-modes.css.
 */

/* ── Body baseline ──────────────────────────────────────────────────────── */
html {
  color: var(--mode-text, #0F172A);
  background: var(--mode-bg, #FFFFFF);
  font-size: calc(1rem * var(--mode-font-scale, 1));
  letter-spacing: var(--mode-letter-spacing, normal);
  line-height: var(--mode-line-height, 1.6);
}

body {
  color: var(--mode-text, #0F172A);
  background: var(--mode-bg, #FFFFFF);
}

/* Legacy fallback: pages that haven't adopted data-theme yet */
html.dark-mode, body.dark-mode { color: #F1F5F9; }
body.dark-mode { background: #0A0E1A; }

/* ── Top-level app wrapper ──────────────────────────────────────────────── */
.oapf-app { color: inherit; }

/* ── Headings ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--mode-text, #0F172A);
}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
  color: var(--mode-text, #F8FAFC);
}

/* ── Paragraph / list / definition ─────────────────────────────────────── */
p, li, dt, dd, label, blockquote, figcaption, summary {
  color: var(--mode-text, #1E293B);
}
body.dark-mode p, body.dark-mode li, body.dark-mode dt, body.dark-mode dd,
body.dark-mode label, body.dark-mode blockquote,
body.dark-mode figcaption, body.dark-mode summary {
  color: var(--mode-text, #E2E8F0);
}

strong, b  { color: inherit; }
em, i:not([class*="fa"]) { color: inherit; }

/* ── Links ──────────────────────────────────────────────────────────────── */
a:not([class]) {
  color: var(--mode-link, #0F766E);
}
a:not([class]):hover {
  color: var(--mode-link-hover, #134E4A);
}
body.dark-mode a:not([class])       { color: var(--mode-link, #5FD7D2); }
body.dark-mode a:not([class]):hover { color: var(--mode-link-hover, #99F6E4); }

/* ── Code / pre ─────────────────────────────────────────────────────────── */
code:not([class]) {
  color: var(--mode-code-text, #0F766E);
  background: var(--mode-code-bg, rgba(15,118,110,0.08));
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  font-size: 0.92em;
}
pre:not([class]) {
  background: var(--mode-surface, #0F172A);
  color: var(--mode-text, #E2E8F0);
  padding: 0.85rem 1rem;
  border-radius: 8px;
  overflow-x: auto;
}

/* ── Form inputs ────────────────────────────────────────────────────────── */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  color: var(--mode-input-text, #0F172A);
  background: var(--mode-input-bg, #FFFFFF);
  border: 1px solid var(--mode-input-border, #CBD5E1);
}
body.dark-mode input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
body.dark-mode textarea,
body.dark-mode select {
  color: var(--mode-input-text, #F1F5F9);
  background: var(--mode-input-bg, #1E293B);
  border-color: var(--mode-input-border, #334155);
}
input::placeholder, textarea::placeholder {
  color: var(--mode-text-muted, #94A3B8);
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
table   { color: var(--mode-text, #0F172A); }
th      { color: var(--mode-text, #0F172A);  background: var(--mode-surface, #F8FAFC); }
td      { color: var(--mode-text, #1E293B); }
tr      { border-bottom: 1px solid var(--mode-border, rgba(15,23,42,0.08)); }
body.dark-mode table { color: var(--mode-text, #F1F5F9); }
body.dark-mode th    { color: var(--mode-text, #F1F5F9); background: var(--mode-surface, #1E293B); }
body.dark-mode td    { color: var(--mode-text, #E2E8F0); }

/* ── Cards / panels ─────────────────────────────────────────────────────── */
.oapf-card {
  background: var(--mode-surface, #FFFFFF);
  color: var(--mode-text, #0F172A);
  border: 1px solid var(--mode-border, rgba(15,23,42,0.08));
}
.oapf-card-soft {
  background: var(--mode-surface-alt, #F8FAFC);
  color: var(--mode-text, #0F172A);
}
body.dark-mode .oapf-card {
  background: var(--mode-surface, #0F172A);
  color: var(--mode-text, #F1F5F9);
}
body.dark-mode .oapf-card-soft {
  background: var(--mode-surface-alt, rgba(255,255,255,0.04));
  color: var(--mode-text, #F1F5F9);
}

/* ── Buttons (unclassed) ────────────────────────────────────────────────── */
button:not([class]) {
  color: var(--mode-text, #0F172A);
  background: var(--mode-surface-alt, #F1F5F9);
  border: 1px solid var(--mode-border, #CBD5E1);
}
body.dark-mode button:not([class]) {
  color: var(--mode-text, #F1F5F9);
  background: var(--mode-surface-alt, #1E293B);
  border-color: var(--mode-border, #334155);
}

/* ── HR ─────────────────────────────────────────────────────────────────── */
hr {
  border: 0;
  border-top: 1px solid var(--mode-border, rgba(15,23,42,0.1));
  margin: 1rem 0;
}

/* ── Page-section fallbacks ─────────────────────────────────────────────── */
body:not(.dark-mode) .install-page,
body:not(.dark-mode) .home-tier1,
body:not(.dark-mode) .meganav,
body:not(.dark-mode) .oapf-app {
  color: var(--mode-text, #0F172A);
}
body.dark-mode .install-page,
body.dark-mode .home-tier1,
body.dark-mode .meganav,
body.dark-mode .oapf-app {
  color: var(--mode-text, #F1F5F9);
}

/* ── Hard-coded inline bg safety net (dark mode only) ───────────────────── */
body.dark-mode .oapf-app *[style*="background: #F8FAFC"],
body.dark-mode .oapf-app *[style*="background:#F8FAFC"],
body.dark-mode .oapf-app *[style*="background: #FAFBFC"],
body.dark-mode .oapf-app *[style*="background:#FAFBFC"] {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
body.dark-mode .oapf-app *[style*="background: #FEF3C7"],
body.dark-mode .oapf-app *[style*="background:#FEF3C7"] {
  background: rgba(217,119,6,0.15) !important;
  border-color: rgba(217,119,6,0.3) !important;
}
body.dark-mode .oapf-app *[style*="background: #F0FDF4"],
body.dark-mode .oapf-app *[style*="background:#F0FDF4"] {
  background: rgba(22,163,74,0.12) !important;
}
body.dark-mode .oapf-app *[style*="background: #FEE2E2"],
body.dark-mode .oapf-app *[style*="background:#FEE2E2"] {
  background: rgba(220,38,38,0.12) !important;
}
body.dark-mode .oapf-app *[style*="background: #DBEAFE"],
body.dark-mode .oapf-app *[style*="background:#DBEAFE"] {
  background: rgba(37,99,235,0.15) !important;
}

/* ── Hard-coded inline color safety net (dark mode only) ────────────────── */
body.dark-mode [style*="color: #475569"],
body.dark-mode [style*="color:#475569"] { color: #cbd5e1 !important; }
body.dark-mode [style*="color: #64748B"],
body.dark-mode [style*="color:#64748B"],
body.dark-mode [style*="color: #64748b"],
body.dark-mode [style*="color:#64748b"] { color: #94a3b8 !important; }
body.dark-mode [style*="color: #94A3B8"],
body.dark-mode [style*="color:#94A3B8"] { color: #94a3b8 !important; }
body.dark-mode [style*="color: #92400E"],
body.dark-mode [style*="color:#92400E"] { color: #fbd38d !important; }
body.dark-mode [style*="color: #1E293B"],
body.dark-mode [style*="color:#1E293B"] { color: #e2e8f0 !important; }
body.dark-mode [style*="color: #166534"],
body.dark-mode [style*="color:#166534"] { color: #86efac !important; }

body.dark-mode [style*="background: #F8FAFC"],
body.dark-mode [style*="background:#F8FAFC"],
body.dark-mode [style*="background: #FAFBFC"],
body.dark-mode [style*="background:#FAFBFC"],
body.dark-mode [style*="background: #f8fafc"],
body.dark-mode [style*="background:#f8fafc"] {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
body.dark-mode [style*="background: #FEF3C7"],
body.dark-mode [style*="background:#FEF3C7"] {
  background: rgba(217,119,6,0.15) !important;
  border-color: rgba(217,119,6,0.3) !important;
}
body.dark-mode [style*="background: #F0FDF4"],
body.dark-mode [style*="background:#F0FDF4"] {
  background: rgba(22,163,74,0.12) !important;
}
body.dark-mode [style*="background: #FEE2E2"],
body.dark-mode [style*="background:#FEE2E2"] {
  background: rgba(220,38,38,0.12) !important;
}
body.dark-mode [style*="background: #DBEAFE"],
body.dark-mode [style*="background:#DBEAFE"] {
  background: rgba(37,99,235,0.15) !important;
}

/* ── Essay body readability ─────────────────────────────────────────────── */
body.dark-mode .essay-body       { color: var(--mode-text, #e2e8f0); }
body.dark-mode .essay-body p     { color: var(--mode-text, #e2e8f0) !important; }

/* ── Reduced-motion (focus/meditation/reading modes set this via tokens,
      but also honour the OS preference) ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}