/* ==========================================================
   DARK MODE
   Applies when the reader picks Dark, or picks System and their
   device is in dark mode. Only token values change here; every
   component in main.css reads these tokens.
   (Loaded on the front end only, so the editor stays light.)
========================================================== */

:root[data-theme="dark"] {
  --bg: #0a1628;
  --surface: #0f1e33;
  --surface-2: #17283f;
  --surface-alt: #122239;
  --tint-1: #0f1e33;
  --tint-2: #0c1a2e;
  --text-strong: #eef3fb;
  --text: #c3cddb;
  --text-soft: #a9b5c6;
  --text-muted: #8d9bb0;
  --border: #22344d;
  --border-strong: #34496a;
  --accent: #7ea6f6;
  --accent-strong: #a9c3f8;
  --accent-soft: #15294a;
  --accent-border: #5b8bf0;
  --success-text: #5af0bf;
  --takeaway-bg: #0b2a25;
  --takeaway-border: #14493c;
  --header-bg: rgba(10, 22, 40, 0.9);
  --header-bg-solid: rgba(10, 22, 40, 0.98);
  --header-border: rgba(255, 255, 255, 0.08);
  --button-dark: #22385a;
  --tooltip-bg: #22344d;
  --topbar-bg: #050e1b;
  --footer-bg: #050e1b;
  --cta-bg: #0f2747;
  --cta-border: #22344d;

  /* Chart series for dark surfaces (validated for color-vision deficiency). */
  --chart-1: #5b8bf0;
  --chart-2: #0d9d6d;
  --chart-3: #9b7bf0;
  --chart-4: #c27d05;
  --chart-other: #556276;

  --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 20px 45px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

/* Same values when following the device setting. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --bg: #0a1628;
    --surface: #0f1e33;
    --surface-2: #17283f;
    --surface-alt: #122239;
    --tint-1: #0f1e33;
    --tint-2: #0c1a2e;
    --text-strong: #eef3fb;
    --text: #c3cddb;
    --text-soft: #a9b5c6;
    --text-muted: #8d9bb0;
    --border: #22344d;
    --border-strong: #34496a;
    --accent: #7ea6f6;
    --accent-strong: #a9c3f8;
    --accent-soft: #15294a;
    --accent-border: #5b8bf0;
    --success-text: #5af0bf;
    --takeaway-bg: #0b2a25;
    --takeaway-border: #14493c;
    --header-bg: rgba(10, 22, 40, 0.9);
    --header-bg-solid: rgba(10, 22, 40, 0.98);
    --header-border: rgba(255, 255, 255, 0.08);
    --button-dark: #22385a;
    --tooltip-bg: #22344d;
    --topbar-bg: #050e1b;
    --footer-bg: #050e1b;
    --cta-bg: #0f2747;
    --cta-border: #22344d;
    --chart-1: #5b8bf0;
    --chart-2: #0d9d6d;
    --chart-3: #9b7bf0;
    --chart-4: #c27d05;
    --chart-other: #556276;
    --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 20px 45px rgba(0, 0, 0, 0.45);

    color-scheme: dark;
  }
}

/* ----------------------------------------------------------
   Component touches that tokens alone don't cover.
   .is-dark is set on <html> by theme.js whenever dark applies.
---------------------------------------------------------- */

.is-dark .nn-brand__logo--light {
  display: none;
}

.nn-brand__logo--dark {
  display: none;
}

.is-dark .nn-brand__logo--dark {
  display: block;
}

.is-dark .nn-article-hero__media img,
.is-dark .nn-card__media img,
.is-dark .nn-related__thumb img {
  filter: brightness(0.88);
}

.is-dark .nn-footer {
  border-top: 1px solid var(--border);
}

.is-dark .nn-chart__plot .nn-segment-label.is-dark {
  fill: #0a1628;
}

.is-dark .button-primary,
.is-dark .wp-block-button__link {
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}

.is-dark .nn-signup__admin {
  background: #3a2502;
  color: #fce7c4;
}

.is-dark .nn-content table tbody tr:nth-child(even) td {
  background: var(--surface-alt);
}

@media print {
  /* Always print light. */
  :root[data-theme] {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f0f1f4;
    --surface-alt: #f7f8fa;
    --tint-1: #f5f8fe;
    --tint-2: #eef3fc;
    --text-strong: #071c34;
    --text: #444f5e;
    --text-soft: #556276;
    --text-muted: #63738b;
    --border: #dbdfe5;
    --accent: #114bc4;
    --takeaway-bg: #e7fcf5;
    --takeaway-border: #c6fae9;
    --chart-1: #114bc4;
    --chart-2: #0d9d6d;
    --chart-3: #5b8bf0;
    --chart-4: #f59e0a;
    --chart-other: #bdc5d0;
    color-scheme: light;
  }
}

.is-dark .nn-article-hero__media {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 30%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 30%, #000 55%);
}

@media (max-width: 760px) {
  .is-dark .nn-article-hero__media {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Mega menu cards */
.is-dark .nn-mega-card--green {
  --mc: #3fcf9b;
  --mc-ink: #52e0b1;
  --mc-soft: #102520;
  --mc-strong: #133029;
  --mc-border: #22463a;
}

.is-dark .nn-mega-card--blue {
  --mc: #7ea6f6;
  --mc-ink: #a9c3f8;
  --mc-soft: #111f37;
  --mc-strong: #152846;
  --mc-border: #253d66;
}

.is-dark .nn-mega-card--navy {
  --mc: #a9b5c6;
  --mc-ink: #eef3fb;
  --mc-soft: #131c2a;
  --mc-strong: #1a2536;
  --mc-border: #2a3a52;
}

.is-dark .nn-mega-card--amber {
  --mc: #e0a33a;
  --mc-ink: #f7ba53;
  --mc-soft: #221809;
  --mc-strong: #2c1f0d;
  --mc-border: #4a3516;
}

.is-dark .nn-mega {
  box-shadow: 0 34px 60px -24px rgba(0, 0, 0, 0.6);
}

.is-dark .nn-mega__art {
  background: linear-gradient(135deg, #15294a, #0b2a25);
}

/* Let's Chat popup */
.is-dark .nn-chat__panel {
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
}

.is-dark .nn-chat::backdrop {
  background: rgba(2, 8, 18, 0.7);
}

.is-dark .nn-field input,
.is-dark .nn-field textarea {
  background: var(--surface-alt);
}

.is-dark .nn-chat__error {
  color: #ff9c9c;
}

.is-dark .nn-chat__check::after {
  border-color: #3fe0a9;
}

/* v2.8.2 — Newsletter surfaces follow the existing mega-card dark palette.
   Explicit dark and System dark both use the theme's .is-dark root marker. */
.is-dark .nn-mega-newsletter--green { --nn-newsletter-bg: #102520; --nn-newsletter-border: #22463a; --nn-newsletter-accent: #52e0b1; --nn-newsletter-description: #c3cddb; --nn-newsletter-button: #0b936a; --nn-newsletter-hover: #087c59; --nn-newsletter-button-ink: #fff; }
.is-dark .nn-mega-newsletter--blue { --nn-newsletter-bg: #111f37; --nn-newsletter-border: #253d66; --nn-newsletter-accent: #a9c3f8; --nn-newsletter-description: #c3cddb; --nn-newsletter-button: #3466d0; --nn-newsletter-hover: #2854ad; --nn-newsletter-button-ink: #fff; }
.is-dark .nn-mega-newsletter--navy { --nn-newsletter-bg: #131c2a; --nn-newsletter-border: #2a3a52; --nn-newsletter-accent: #eef3fb; --nn-newsletter-description: #c3cddb; --nn-newsletter-button: #344f78; --nn-newsletter-hover: #42628f; --nn-newsletter-button-ink: #fff; }
.is-dark .nn-mega-newsletter--amber { --nn-newsletter-bg: #221809; --nn-newsletter-border: #4a3516; --nn-newsletter-accent: #f7ba53; --nn-newsletter-description: #d7d0c5; --nn-newsletter-button: #e0a33a; --nn-newsletter-hover: #f0b957; --nn-newsletter-button-ink: #142033; }