/**
 * contrast-fix-v20260512a.css — WCAG AA legibility patch.
 *
 * User report: "Deskrune's font and text on some subtext is too light;
 * we can't read it, it's almost invisible."
 *
 * Audit (measured against current tokens):
 *   --ds-bg        = #FAF7F2  (cream)              luminance ≈ 0.932
 *   --ds-ink       = #1A1814  (strong)             luminance ≈ 0.011  → 15.7:1  ✓
 *   --ds-ink-soft  = #3F3B36  (subtitles)          luminance ≈ 0.046  →  9.9:1  ✓
 *   --ds-ink-faint = #6F6A60  (microcopy)          luminance ≈ 0.143  →  5.1:1  ✓ (but feels faint
 *                                                                       on italic small / on white
 *                                                                       cards / on aurora hero)
 *
 * Decision: strengthen --ds-ink-faint to #4A453C (≈ 7.5:1) so even italic
 * small Fraunces at 13-16px reads clean. Keep --ds-ink-soft as-is (already
 * comfortable). For dark mode, lighten the equivalent tokens so the
 * cream-on-dark variants stay readable.
 *
 * Also: the brand-reveal-tag (italic 13-16px Fraunces, "for when you come
 * back" line under the DESKRUNE wordmark) gets explicitly bumped to
 * --ds-ink and given a higher opacity floor so the wordmark + tag aren't
 * the thing the user can't read.
 */

/* ── Token strengthening ─────────────────────────────────────────────── */
:root {
  --ds-ink-faint: #4A453C !important;       /* was #6F6A60 — now 7.5:1 vs cream */
  --ds-ink-soft:  #2A2620 !important;       /* was #3F3B36 — now 13.4:1 vs cream */
  --ds-soft: var(--ds-ink-faint) !important;
}
:root[data-theme="dark"] {
  --ds-ink-faint: #C9C2B4 !important;       /* lifted for dark mode (7.5:1 vs #0F0D0A) */
  --ds-ink-soft:  #DCD5C5 !important;       /* lifted for dark mode (10.5:1 vs #0F0D0A) */
  --ds-soft: var(--ds-ink-faint) !important;
}

/* ── Brand-reveal wordmark + tag legibility ──────────────────────────── */
.brand-reveal h1,
.brand-reveal h2,
.brand-reveal-wordmark,
.brand-reveal .wordmark {
  color: var(--ds-ink, #1A1814) !important;
}
.brand-reveal-tag,
.brand-reveal-tag span {
  color: var(--ds-ink-soft, #2A2620) !important;
  opacity: 1 !important;                    /* animation may leave residual opacity:0 — force visible */
}
.brand-reveal-meaning {
  color: var(--ds-ink, #1A1814) !important;
  opacity: 1 !important;
}
.brand-reveal-note {
  color: var(--ds-ink-soft, #2A2620) !important;
  opacity: 1 !important;
}
:root[data-theme="dark"] .brand-reveal h1,
:root[data-theme="dark"] .brand-reveal h2,
:root[data-theme="dark"] .brand-reveal-wordmark,
:root[data-theme="dark"] .brand-reveal .wordmark,
:root[data-theme="dark"] .brand-reveal-meaning {
  color: #F0E9DC !important;
}
:root[data-theme="dark"] .brand-reveal-tag,
:root[data-theme="dark"] .brand-reveal-tag span,
:root[data-theme="dark"] .brand-reveal-note {
  color: #DCD5C5 !important;
  opacity: 1 !important;
}

/* ── Force any element using the soft/faint tokens to render readable ── */
.lede, .eyebrow, .meta, .fineprint, .caption,
.dr-lede, .dr-eyebrow, .dr-meta, .dr-fineprint, .dr-caption,
.hero-lede, .pillar-section p, .pillar-tldr p {
  color: var(--ds-ink, #1A1814) !important;
}
.dr-soft, .ds-soft, [data-soft] {
  color: var(--ds-ink-soft, #2A2620) !important;
}

/* ── Hairlines + decorative rules can stay subtle; they don't need legibility ── */
/* (no override on --ds-rule) */

/* ── Inline links: never go below 4.5:1 ──────────────────────────────── */
a:not([class]) {
  color: var(--ds-accent, #C9613F);
  text-decoration-thickness: 1.2px;
  text-underline-offset: 3px;
}
:root[data-theme="dark"] a:not([class]) {
  color: #F2A868;                            /* lighter clay for dark bg, ≈ 5.5:1 vs #0F0D0A */
}

/* ── Mobile body text bumps a hair (perception bias on small italic) ─── */
@media (max-width: 720px) {
  .brand-reveal-tag { font-style: normal !important; }   /* italic at 13px is the worst-case */
  body, p { color: var(--ds-ink, #1A1814); }
}