/* ==========================================================================
   Neutral dark mode — The Sri COM
   --------------------------------------------------------------------------
   The original dark theme was built on navy (#07111f) with a blue glow behind
   the page, so everything read as "dark blue" rather than dark. This retunes
   every dark surface to a neutral near-black, and keeps the brand blue
   (#2475e8) purely for accents — links, tags, buttons, the masthead.

   Light mode is untouched.

   ── Want it warmer or cooler? ──
   Change the six --d-* values below; everything else is derived from them.
   ========================================================================== */

html[data-theme="dark"] {
  --d-page:     #0c0c0e;   /* page background            */
  --d-soft:     #131316;   /* slightly raised areas      */
  --d-panel:    #1a1a1e;   /* cards, panels              */
  --d-raised:   #212126;   /* image placeholders, fields */
  --d-line:     rgba(255, 255, 255, .10);
  --d-line-mid: rgba(255, 255, 255, .16);

  /* Retune the theme's own variables. */
  --bg:      var(--d-page);
  --bg-soft: var(--d-soft);
  --panel:   var(--d-panel);
  --line:    var(--d-line);
  --text:    #f2f2f4;
  --muted:   #9d9da6;
}

/* --- Page + chrome -------------------------------------------------------- */

/* The blue radial glow behind the page is what made everything read navy. */
html[data-theme="dark"] body {
  background: var(--d-page);
}

html[data-theme="dark"] .site-footer {
  background: #09090b;
  border-color: var(--d-line);
}

/* --- Cards, panels, media ------------------------------------------------- */

html[data-theme="dark"] .post-card {
  background: var(--d-panel);
  border-color: var(--d-line);
}

html[data-theme="dark"] .post-card:hover {
  border-color: var(--d-line-mid);
  box-shadow: 0 16px 45px rgba(0, 0, 0, .45);
}

html[data-theme="dark"] .featured-story {
  border-color: var(--d-line);
  background: var(--d-panel);
}

html[data-theme="dark"] .featured-media,
html[data-theme="dark"] .card-media,
html[data-theme="dark"] .post-tile-image,
html[data-theme="dark"] .editorial-image,
html[data-theme="dark"] .secondary-image,
html[data-theme="dark"] .spotlight-image,
html[data-theme="dark"] .lead-image,
html[data-theme="dark"] .feed-image {
  background: var(--d-raised);
}

html[data-theme="dark"] .image-fallback {
  color: rgba(255, 255, 255, .5);
}

/* --- Rules and dividers --------------------------------------------------- */

html[data-theme="dark"] .latest-column,
html[data-theme="dark"] .spotlight-column,
html[data-theme="dark"] .editorial-lead,
html[data-theme="dark"] .latest-list li,
html[data-theme="dark"] .spotlight-list article,
html[data-theme="dark"] .editorial-grid article,
html[data-theme="dark"] .pager,
html[data-theme="dark"] .section-heading,
html[data-theme="dark"] .editorial-note,
html[data-theme="dark"] .footer-bottom,
html[data-theme="dark"] .related,
html[data-theme="dark"] .comments,
html[data-theme="dark"] .comment {
  border-color: var(--d-line);
}

html[data-theme="dark"] .pager-btn,
html[data-theme="dark"] .pager-num {
  border-color: var(--d-line);
  color: #d4d4d8;
}

/* --- Sidebar -------------------------------------------------------------- */

html[data-theme="dark"] .spotlight-column {
  --side-line: rgba(255, 255, 255, .10);
  --side-muted: #9d9da6;
  --side-title: #f2f2f4;
  --side-thumb: var(--d-raised);
}

html[data-theme="dark"] .subscribe-panel {
  border-color: rgba(36, 117, 232, .38);
  background: linear-gradient(135deg, #17253c, #131316);
}

/* --- Comments + likes ----------------------------------------------------- */

html[data-theme="dark"] .comments {
  --c-line: var(--d-line);
  --c-panel: var(--d-panel);
  --c-text: #ececef;
  --c-muted: #9d9da6;
  --c-field: #141417;
}

html[data-theme="dark"] .like-bar {
  --like-line: var(--d-line-mid);
  --like-text: #e4e4e8;
  --like-muted: #9d9da6;
}

/* --- Article body --------------------------------------------------------- */

html[data-theme="dark"] .gh-content { color: #dcdce0; }

html[data-theme="dark"] .gh-content h2,
html[data-theme="dark"] .gh-content h3,
html[data-theme="dark"] .article-header h1 { color: #f6f6f8; }

html[data-theme="dark"] .gh-content blockquote {
  border-left-color: #2475e8;
  color: #c9c9d0;
}

html[data-theme="dark"] .dek,
html[data-theme="dark"] .byline,
html[data-theme="dark"] .story-meta,
html[data-theme="dark"] .article-image figcaption {
  color: #9d9da6;
}

/* --- Footer --------------------------------------------------------------- */

html[data-theme="dark"] .footer-links a,
html[data-theme="dark"] .footer-social .social-link { color: #c8c8ce; }

html[data-theme="dark"] .footer-social .social-link { border-color: var(--d-line-mid); }

html[data-theme="dark"] .footer-label { color: #86868f; }

/* --- Focus ring ----------------------------------------------------------- */

/* The old cyan ring belonged to the navy palette. */
html[data-theme="dark"] a:focus-visible,
html[data-theme="dark"] button:focus-visible {
  outline-color: #2475e8;
}