/* =========================================================
   Article detail — dark-mode overrides

   The vast majority of theming is handled by Fresh Desk tokens
   (var(--bg), --ink, --accent, etc.) defined in home-redesign.css.
   This file only carries the things tokens can't express:
   semantic colour tints (success/error/difficulty/callouts) and
   the shadow on the reading panel.
   ========================================================= */

/* Soften the reading panel's drop shadow on a dark backdrop */
.content-part .content {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 24px 60px -24px rgba(0, 0, 0, 0.55);
}

/* Sidebar / generic cards (legacy topic templates) */
.card,
.sidebar .card {
  background-color: var(--bg-card);
  border: 1px solid var(--rule);
  color: var(--ink);
}

.card-header {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}

/* Article-body link underline — indigo at 40% on dark feels cleaner
   than the light-mode rgba */
.article-body a {
  text-decoration-color: rgba(140, 149, 240, 0.4);
}

.article-body a:hover {
  text-decoration-color: var(--accent);
}

/* Difficulty badges — dark tints */
.difficulty-easy   { background: rgba(46, 164, 79, 0.16);  color: #6fdc94; }
.difficulty-medium { background: rgba(217, 131, 36, 0.18); color: #e8a85e; }
.difficulty-hard   { background: rgba(229, 72, 77, 0.18);  color: #f0888c; }

/* Semantic feedback strips */
.success-msg {
  color: #86efac;
  background-color: #052e16;
  border-color: #166534;
}

.cf-success {
  background: #052e16;
  border-color: #166534;
  color: #86efac;
}

.cf-error {
  background: #450a0a;
  border-color: #991b1b;
  color: #fca5a5;
}

/* Legacy callouts (non-.article-body — used by older topic templates) */
.tip-box {
  background: #1e293b;
  border-left-color: #38bdf8;
  color: var(--ink);
}

.warning-box {
  background: #2d2306;
  border-left-color: #f59e0b;
  color: var(--ink);
}

.important-box {
  background: #2d0a0a;
  border-left-color: #ef4444;
  color: var(--ink);
}

/* Editorial callouts inside article body — tinted tones for dark */
.article-body .tip-box {
  background: rgba(59, 130, 246, 0.12);
  border-left-color: #60a5fa;
  color: #cdddf2;
}

.article-body .warning-box {
  background: rgba(224, 147, 15, 0.13);
  border-left-color: #f0b454;
  color: #ecd9b4;
}

.article-body .important-box {
  background: rgba(229, 72, 77, 0.13);
  border-left-color: #f0888c;
  color: #f0cdcd;
}

.article-body .tip-box p,
.article-body .warning-box p,
.article-body .important-box p,
.article-body .tip-box li,
.article-body .warning-box li,
.article-body .important-box li {
  color: inherit;
}