/* ═══════════════════════════════════════════════════════════════════
   NIGHT THEME — BLOG ARTICLES. Loads AFTER /theme.css on every
   blog/*.html post + the three legacy root blog-*.html pages.
   Additive overrides keyed on html[data-theme="night"]; day mode is
   the page's own stylesheet untouched — nothing here fires.
   Palette (must match the homepage ladder in /theme.css):
     bg #0B1220 · raised #101A2E · card #131F38 · inset #1D2A44
     headings #F1F5F9 · body #A9B6CC (long-form prose #C3CEDF)
     muted #94A3B8 · borders white @ 12% / 7% · links #60A5FA
   Brand gradients (blue→cyan) + emerald/amber accents stay.
   The blog template pipes most colors through :root variables, so the
   bulk of the flip happens by re-declaring those vars on the html
   element (html[data-theme="night"] outranks :root). Literal-color
   holdouts are overridden individually below.
   ═══════════════════════════════════════════════════════════════════ */

html[data-theme="night"] {
  /* NOTE: --white / --blue / --blue-light / --green and the per-page
     accent vars (--teal/--cyan/--pink/--purple/--red) are deliberately
     NOT flipped — they feed brand gradients, the CTA box, and accent
     chips that must keep their hue in night mode. */
  --dark: #F1F5F9;                 /* headings / strong / th text */
  --gray-900: #E2E8F0;             /* body base color */
  --gray-700: #A9B6CC;             /* secondary text */
  --gray-500: #94A3B8;             /* muted */
  --gray-300: rgba(255,255,255,0.12); /* table/hr borders */
  --gray-100: #1D2A44;             /* inset fills: code, th, toc, callouts */
}

/* ═══ ARTICLE HEADER ═══
   Day mode tints the header with one of a dozen pastel gradients that
   all fade to var(--white); flatten them onto the raised night band. */
html[data-theme="night"] .article-header {
  background: linear-gradient(180deg, #101A2E 0%, #0B1220 100%);
}
html[data-theme="night"] .article-header h1 { color: #F1F5F9; }

/* category badge hue varies per page (blue/green/purple) via literal
   colors — brighten in place rather than re-mapping every variant so
   each page keeps its own accent hue. */
/* .category night recolor lives in theme.css (uniform chip on all templates) */

/* ═══ PROSE ═══ long-form body copy gets the brighter rung so it
   never reads dim on a full article. */
html[data-theme="night"] .article-body p,
html[data-theme="night"] .article-body li,
html[data-theme="night"] .article-body blockquote { color: #C3CEDF; }
html[data-theme="night"] .article-body strong { color: #F1F5F9; }
html[data-theme="night"] .article-body a { color: #60A5FA; }
html[data-theme="night"] .article-body code { color: #E2E8F0; }
html[data-theme="night"] .article-body blockquote {
  background: rgba(96,165,250,0.08);
}

/* ═══ TABLES ═══ th/td borders + th fills flip via the vars above;
   these are the literal-color stragglers. */
html[data-theme="night"] .comparison-table th {
  background: #1D2A44; color: #F1F5F9;
}
html[data-theme="night"] .comparison-table td { color: #C3CEDF; }
html[data-theme="night"] .comparison-table tr.highlight td {
  background: rgba(96,165,250,0.10);
}
/* verdict cells: lift the dark-mode-dim reds/greens/blues one rung */
html[data-theme="night"] .cost-table td.best,
html[data-theme="night"] .data-table td.highlight,
html[data-theme="night"] .comp-table td.win,
html[data-theme="night"] .comparison-table .savings { color: #34D399; }
html[data-theme="night"] .cost-table td.worst,
html[data-theme="night"] .comp-table td.lose { color: #F87171; }
html[data-theme="night"] .vs-table td.win-sms { color: #60A5FA; }
html[data-theme="night"] .vs-table td.win-email { color: #C4B5FD; }

/* ═══ CALLOUTS ═══ light pastel fills → alpha tints of the same hue */
html[data-theme="night"] .callout { background: rgba(37,99,235,0.12); }
html[data-theme="night"] .callout strong { color: #60A5FA; }
html[data-theme="night"] .ok   { background: rgba(16,185,129,0.12); }
html[data-theme="night"] .warn { background: rgba(239,68,68,0.12); }
/* A/B-test variant cards sit on a var(--white) fill inside a tinted
   block — give them the card rung instead */
html[data-theme="night"] .test-block .v { background: #131F38; }

/* ═══ TOC (legacy root articles) ═══ fill flips via --gray-100 */
html[data-theme="night"] .toc a { color: #60A5FA; }

/* ═══ "KEEP READING" (interlink sweep) ═══ injected with inline styles,
   so these need [style*=] + !important to win over the style attribute. */
html[data-theme="night"] [data-rsms-related] {
  border-top-color: rgba(255,255,255,0.12) !important;
}
html[data-theme="night"] [data-rsms-related] h2 { color: #F1F5F9 !important; }
html[data-theme="night"] [data-rsms-related] a { color: #60A5FA; }
/* stray inline light-pastel fills / dark inline headings elsewhere */
html[data-theme="night"] .article-body [style*="#F0F7FF"] {
  background: rgba(37,99,235,0.12) !important;
}
html[data-theme="night"] .article-body [style*="#FEF2F2"] {
  background: rgba(239,68,68,0.12) !important;
}
html[data-theme="night"] .article-body [style*="var(--blue)"] { color: #60A5FA !important; }

/* ═══ CTA BOX ═══ brand blue→cyan gradient + white button kept as-is
   (it reads as a bright band in night mode by design, matching the
   homepage). Nothing to override. */

/* ═══ BACK LINK ═══ */
html[data-theme="night"] .back-link a { color: #60A5FA; }

/* ═══ FOOTER ═══ already dark (#0f172a) in day mode and intentionally
   kept, same as the homepage — but `footer a` colors ride var(--gray-300),
   which now means "border white @ 12%"; re-pin link colors. */
html[data-theme="night"] footer a { color: rgba(255,255,255,0.35); }
html[data-theme="night"] footer a:hover { color: #fff; }
html[data-theme="night"] footer .logo .sms { color: #fff; }