/* ==========================================================================
   KatangaVox — dark theme.

   Loaded after light-refresh.css and scoped entirely to [data-theme="dark"],
   so the light theme is untouched.

   Brief: keep the original green identity exactly as it was — the same green
   in the same role, green leading and copper/gold secondary — and make the
   improvement purely about depth and gradient. No re-hued brand, no
   copper-led masthead, no palette variants.

   What the original dark theme got wrong was depth, not colour: background
   #202923 and surface #29342d sit about 2% apart in luminance, so page,
   section and card all collapsed onto one plane. The greens below are the
   original values; what is new is a genuine tonal scale beneath them,
   restrained gradients, lit edges and elevation.
   ========================================================================== */

[data-theme='dark'] {
  /* Tonal scale. The page base is deepened so the original surface tones
     have somewhere to sit above it; every step stays in the same green
     family rather than drifting toward grey or brown. */
  --color-bg: #151c17;
  --color-surface: #1d2620;
  --color-surface-2: #29342d; /* original surface value, now a card tone */
  --color-surface-offset: #344239; /* original surface-2, now the raised tone */
  --color-border: #46554b;
  --color-divider: #2b3630;

  /* Type: unchanged from the original dark theme. */
  --color-text: #f5f0e7;
  --color-text-muted: #c6cec7;
  --color-text-faint: #9ca79f;
  --color-text-inverse: #151c17;

  /* Brand: the original greens and accents, unchanged. Green leads. */
  --color-green: #75bd91;
  --color-primary: #f05a6d;
  --color-primary-hover: #f47887;
  --color-primary-active: #d64559;
  --color-primary-highlight: #34222a;
  --color-navy: #a9bdd8;
  --color-gold: #efc46d;

  /* Derived helpers. */
  --kv-green-soft: rgba(117, 189, 145, 0.15);
  --kv-green-line: rgba(117, 189, 145, 0.28);
  --kv-glow: rgba(117, 189, 145, 0.10);
  --kv-on-accent: #241217; /* dark text for bright fills */
  --kv-scrim-from: rgba(12, 18, 14, 0);
  --kv-scrim-to: rgba(12, 18, 14, 0.92);

  --kv-elev-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --kv-elev-2: 0 4px 14px rgba(0, 0, 0, 0.42), 0 1px 2px rgba(0, 0, 0, 0.36);
  --kv-elev-3: 0 14px 38px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.38);
  /* A hairline lighter than the fill reads as a lit top edge. */
  --kv-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ── Page depth ─────────────────────────────────────────────────────────
   A soft green glow behind the masthead and a gentle vertical fade. Both
   deliberately restrained: this is a news publication, and the reading
   surface has to stay calm. */

[data-theme='dark'] body {
  background-color: var(--color-bg);
  background-image:
    radial-gradient(1100px 480px at 50% -160px, var(--kv-glow), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 420px);
  background-repeat: no-repeat;
}

/* Sections sit one step above the page. */
[data-theme='dark'] .editorial-programme,
[data-theme='dark'] .heritage-strip,
[data-theme='dark'] .section-surface {
  background-image: linear-gradient(180deg, var(--color-surface), var(--color-bg));
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

/* Cards sit one step above sections: fill, hairline, shadow. */
[data-theme='dark'] .article-card,
[data-theme='dark'] .topic-card,
[data-theme='dark'] .pillar-card,
[data-theme='dark'] .article-next,
[data-theme='dark'] .figure-card,
[data-theme='dark'] .card {
  background-color: var(--color-surface-2);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 60%);
  border: 1px solid var(--color-divider);
  box-shadow: var(--kv-elev-2), var(--kv-hairline);
}

[data-theme='dark'] .article-card:hover,
[data-theme='dark'] .topic-card:hover,
[data-theme='dark'] .pillar-card:hover {
  background-color: var(--color-surface-offset);
  border-color: var(--kv-green-line);
  box-shadow: var(--kv-elev-3), var(--kv-hairline);
}

/* Masthead: raised, with a green hairline rather than a hard rule. */
[data-theme='dark'] .site-header,
[data-theme='dark'] header.site-header,
[data-theme='dark'] .masthead {
  background-color: rgba(21, 28, 23, 0.88);
  background-image: linear-gradient(180deg, rgba(117, 189, 145, 0.06), transparent);
  backdrop-filter: saturate(1.1) blur(10px);
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid var(--color-divider);
  box-shadow: 0 1px 0 var(--kv-green-soft), var(--kv-elev-1);
}

/* Hero: a soft glow behind the lead image, no hard edge. */
[data-theme='dark'] .article-hero,
[data-theme='dark'] .hero-bg {
  background-image: radial-gradient(900px 420px at 50% 0, var(--kv-glow), transparent 70%);
}

/* ── Ticker ─────────────────────────────────────────────────────────────
   The original filled this band with saturated mint and white text, which
   shouted over the page. Same green, now as the type colour on a raised
   band. */

[data-theme='dark'] .ticker-bar {
  background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
  color: var(--color-green);
  border: 0;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  box-shadow: var(--kv-hairline);
}

[data-theme='dark'] .ticker-item,
[data-theme='dark'] .ticker-bar a {
  color: var(--color-green);
}

[data-theme='dark'] .ticker-bar strong {
  color: var(--color-text);
}

/* The light theme fills this badge with cream (#f5e8ce), which reads as an
   unstyled pale block on a dark band. Re-tone it into the scale and give it a
   green edge so it still reads as a label. */
[data-theme='dark'] .ticker-label {
  background: var(--color-surface-offset);
  color: var(--color-text);
  box-shadow: inset -1px 0 0 var(--kv-green-line), var(--kv-hairline);
}

/* ── Brand assets ───────────────────────────────────────────────────────
   The original brightened and desaturated the logo, washing it out. Keep the
   artwork true and lift it with a shadow instead. */

[data-theme='dark'] .logo-img,
[data-theme='dark'] .site-logo img {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

/* The flag is never dimmed or tinted. */
[data-theme='dark'] .flag-ribbon,
[data-theme='dark'] .flag,
[data-theme='dark'] .flag-stripe {
  filter: none;
  opacity: 1;
}

/* Photography: a hairline and a shadow so images sit on the page without the
   haloing a light border causes. No brightness filtering. */
[data-theme='dark'] .article-hero img,
[data-theme='dark'] .card-media img,
[data-theme='dark'] .article-prose img,
[data-theme='dark'] figure img {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), var(--kv-elev-2);
  filter: none;
}

/* ── Image captions ────────────────────────────────────────────────────
   Was an opaque slab floating over the photo. Now a gradient scrim that
   rises out of the image's own bottom edge. */

[data-theme='dark'] figcaption,
[data-theme='dark'] .figure-caption,
[data-theme='dark'] .article-hero figcaption,
[data-theme='dark'] .hero-figure figcaption {
  background: linear-gradient(180deg, var(--kv-scrim-from), var(--kv-scrim-to) 62%);
  color: var(--color-text);
  border-top: 0;
  box-shadow: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

[data-theme='dark'] figcaption a,
[data-theme='dark'] .figure-caption a,
[data-theme='dark'] figcaption .credit,
[data-theme='dark'] .figure-credit {
  color: var(--color-green);
}

/* ── Type and links: green leads ───────────────────────────────────────── */

[data-theme='dark'] a {
  color: var(--color-green);
}

[data-theme='dark'] a:hover {
  color: var(--color-text);
}

[data-theme='dark'] .article-prose a {
  color: var(--color-green);
  text-decoration-color: var(--kv-green-line);
  text-underline-offset: 3px;
}

[data-theme='dark'] .article-prose a:hover {
  text-decoration-color: var(--color-green);
}

[data-theme='dark'] .article-kicker,
[data-theme='dark'] .card-kicker,
[data-theme='dark'] .section-kicker,
[data-theme='dark'] .kicker {
  color: var(--color-green);
}

[data-theme='dark'] .article-prose blockquote {
  background-image: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
  border-left: 3px solid var(--color-green);
  color: var(--color-text);
  box-shadow: var(--kv-hairline);
}

/* ── Controls ───────────────────────────────────────────────────────────
   The original put white text on the bright primary, measuring 3.29:1 and
   failing AA. A bright fill takes dark text. This was a real defect, so the
   fix stays. */

[data-theme='dark'] .btn-primary,
[data-theme='dark'] button.btn-primary {
  background: var(--color-primary);
  color: var(--kv-on-accent);
  border-color: transparent;
  box-shadow: var(--kv-elev-1);
}

[data-theme='dark'] .btn-primary:hover,
[data-theme='dark'] button.btn-primary:hover {
  background: var(--color-primary-hover);
  color: var(--kv-on-accent);
}

[data-theme='dark'] .btn,
[data-theme='dark'] .btn-secondary {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

[data-theme='dark'] .btn:hover,
[data-theme='dark'] .btn-secondary:hover {
  background: var(--color-surface-offset);
  border-color: var(--color-green);
}

[data-theme='dark'] input,
[data-theme='dark'] textarea,
[data-theme='dark'] select {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

[data-theme='dark'] input::placeholder,
[data-theme='dark'] textarea::placeholder {
  color: var(--color-text-faint);
  opacity: 1;
}

[data-theme='dark'] input:focus,
[data-theme='dark'] textarea:focus,
[data-theme='dark'] select:focus {
  border-color: var(--color-green);
  outline: none;
  box-shadow: 0 0 0 3px var(--kv-green-soft);
}

[data-theme='dark'] hr,
[data-theme='dark'] .divider {
  border-color: var(--color-divider);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

[data-theme='dark'] .site-footer,
[data-theme='dark'] footer.site-footer {
  background-image: linear-gradient(180deg, var(--color-surface), var(--color-bg));
  border-top: 1px solid var(--color-divider);
}

/* ── Theme cross-fade ───────────────────────────────────────────────────
   Applied only for the duration of a deliberate toggle (see
   theme-enhance.js), never on load, so nothing transitions on first paint
   and nothing animates while reading. */

.theme-transition,
.theme-transition body,
.theme-transition .site-header,
.theme-transition .article-card,
.theme-transition .ticker-bar,
.theme-transition .site-footer {
  transition:
    background-color 260ms ease,
    color 260ms ease,
    border-color 260ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .theme-transition,
  .theme-transition body,
  .theme-transition .site-header,
  .theme-transition .article-card,
  .theme-transition .ticker-bar,
  .theme-transition .site-footer {
    transition: none;
  }
}