/* ===========================================================================
   NOIR CHROMA — page.php (CMS blocks)
   Overrides assets/css/cms-page.css, which declares its own :root token set.
   =========================================================================== */

/* cms-page.css has :root { --page-bg … } (0-0-0 on :root). Re-pointing those
   at noir values here (0-1-1) does most of the work in one block. */
body[data-skin="noir"] {
  --page-bg:      var(--n-bg);
  --page-text:    var(--n-text);
  --page-heading: var(--n-fg);
  --page-accent:  var(--n-accent);
  --page-surface: var(--n-surface);
  --page-border:  var(--n-border);
}

body[data-skin="noir"] .cms-page-wrapper { background: var(--n-bg); }

body[data-skin="noir"] .container-reading { max-width: var(--n-maxw-read); }
body[data-skin="noir"] .container-wide { max-width: var(--n-maxw); }

body[data-skin="noir"] .draft-badge {
  background: rgba(255, 180, 61, .12);
  border: 1px solid rgba(255, 180, 61, .4);
  color: var(--n-warning);
  border-radius: var(--n-r-pill);
}


/* ---- Hero --------------------------------------------------------------- */

body[data-skin="noir"] .block-hero { border-bottom: 1px solid var(--n-border); }

body[data-skin="noir"] .hero-title {
  font-family: var(--n-font-display);
  font-size: var(--n-fz-3xl);
  font-weight: var(--n-fw-bold);
  letter-spacing: -.02em;
  color: var(--n-fg);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body[data-skin="noir"] .hero-title {
    background: var(--n-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
body[data-skin="noir"] .hero-sub { color: var(--n-text-muted); }


/* ---- Text --------------------------------------------------------------- */

body[data-skin="noir"] .block-text {
  color: var(--n-text);
  font-size: var(--n-fz-lg);
  line-height: var(--n-lh-read);
}
body[data-skin="noir"] .block-text h2,
body[data-skin="noir"] .block-text h3 {
  font-family: var(--n-font-display);
  color: var(--n-fg);
  margin-top: var(--n-s7);
}
body[data-skin="noir"] .block-text a {
  color: var(--n-accent);
  text-underline-offset: 3px;
}
body[data-skin="noir"] .block-text a:hover { color: var(--n-amber); }
body[data-skin="noir"] .block-text blockquote {
  border: 0;
  border-inline-start: 3px solid transparent;
  border-image: var(--n-grad) 1;
  background: var(--n-surface);
  padding: var(--n-s4) var(--n-s5);
  margin-inline: 0;
  color: var(--n-fg);
}
body[data-skin="noir"] .block-text ul,
body[data-skin="noir"] .block-text ol { color: var(--n-text); }
body[data-skin="noir"] .block-text hr { background: var(--n-border); border: 0; }


/* ---- Image -------------------------------------------------------------- */

/* Shadows are invisible on ink — a hairline frame is what actually reads. */
body[data-skin="noir"] .img-card {
  background: var(--n-ink-2);
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-md);
  box-shadow: none;
  overflow: hidden;
}
body[data-skin="noir"] .img-caption {
  color: var(--n-text-dim);
  font-size: var(--n-fz-sm);
}


/* ---- CTA ---------------------------------------------------------------- */

body[data-skin="noir"] .block-cta {
  background: var(--n-ink-1);
  border-block: 1px solid var(--n-border);
}
body[data-skin="noir"] .cta-btn {
  background: var(--n-grad);
  color: var(--n-on-accent);
  -webkit-text-fill-color: var(--n-on-accent);
  border: 0;
  border-radius: var(--n-r-pill);
  font-family: var(--n-font-display);
  font-weight: var(--n-fw-bold);
  min-height: 48px;
  transition: filter var(--n-dur) var(--n-ease), box-shadow var(--n-dur) var(--n-ease);
}
body[data-skin="noir"] .cta-btn:hover {
  filter: brightness(1.08);
  box-shadow: var(--n-glow);
}

body[data-skin="noir"] .empty-page { color: var(--n-text-dim); }


/* ---- Mobile ------------------------------------------------------------- */

@media (max-width: 900px) {
  body[data-skin="noir"] .hero-title { font-size: var(--n-fz-2xl); }
  body[data-skin="noir"] .block-text blockquote { padding: var(--n-s3) var(--n-s4); }
}

@media (prefers-reduced-motion: reduce) {
  /* page.php:83 writes an inline animation-delay on every .page-section. */
  body[data-skin="noir"] .page-section { animation: none; opacity: 1; }
  body[data-skin="noir"] .cta-btn { transition: none; }
}