/* ============ Marketing v2 — dark article surface ============
 * The bodies that predate the redesign and still ride the shared base: docs
 * pages, blog posts, the 17 frozen legacy SEO/calculator pages and the privacy
 * policy. Loaded ONLY through base_marketing_v2.html's `legacy_assets` block,
 * i.e. only where marketing.css + reading.css render a body, and keyed on
 * body.m2--article (the shell's default surface), so it cannot reach a v2
 * Conversion/Hub page, the Sample Report, the signed-in app or a flag-off page.
 *
 * How: reading.css and marketing.css draw almost every colour through the
 * --c-* tokens, so re-pointing those tokens inside .m2-main re-skins the bodies
 * without editing either file (the flag-off pages still use both, unchanged).
 * The replacements are HEX on purpose: a var() that resolves to hex is valid on
 * the CSS floor browser, where the oklch originals blank the property
 * (CLAUDE.md §4.13 bite #2). The handful of rules that hard-code a light colour
 * are overridden explicitly below, hex first then a literal oklch().
 *
 * Palette = m2.css's tokens; every text pair is >= 4.5:1 on ink and on ink-2.
 */

body.m2--article {
  background: #0d0e12;
  background: oklch(0.165 0.009 274.3);
  color: #ecedf2;
  color: oklch(0.947 0.007 277.2);
}

.m2--article .m2-main {
  --c-bg: #0d0e12;
  --c-bg-soft: #15161c;
  --c-bg-sunk: #1a1b22;
  --c-panel: #15161c;
  --c-border: #2a2c37;
  --c-border-strong: #3a3d4a;
  --c-fg: #ecedf2;
  --c-fg-muted: #a9acba;
  --c-fg-faint: #8a8d9c;
  --c-accent: #8b8ff7;
  --c-accent-hover: #b4b7fa;
  --c-accent-soft: #1f2140;
  --c-accent-fg: #ffffff;
  --c-success: #5fd39a;
  --c-success-soft: #13261d;
  --c-warning: #e5b25a;
  --c-warning-soft: #2a2213;
  --c-danger: #f08a7e;
  --c-danger-soft: #2c1714;
  --c-info: #7fb2ec;
  --c-info-soft: #14202e;
  color: #ecedf2;
  background: #0d0e12;
}

/* marketing.css paints the body/section surfaces from --c-bg*, which sit
   OUTSIDE .m2-main on <body>; keep them ink. */
body.m2--article.mkt-body { background: #0d0e12; }

/* .mkt-section fills from --c-panel, which above is the RAISED surface (cards,
   calculators, chips). A section is page, not card: keep it ink so the body
   runs seamlessly from the nav to the footer. */
.m2--article .m2-main .mkt-section { background: #0d0e12; }
.m2--article .m2-main .mkt-section-alt { background: #15161c; }

/* --c-accent is a text colour above (links on ink). As a FILL it is too light
   for white type, so filled accents take the m2 solid indigo instead. */
.m2--article .m2-main .btn-accent,
.m2--article .m2-main .btn-accent:disabled,
.m2--article .m2-main .btn-accent[disabled] {
  background: #5b5fe0;
  background: oklch(0.555 0.192 276.8);
  color: #ffffff;
}
.m2--article .m2-main .btn-accent:hover {
  background: #4b4fd0;
  background: oklch(0.504 0.195 275.5);
}
.m2--article .m2-main .btn-default {
  background: #15161c;
  border-color: #2a2c37;
  color: #ecedf2;
}

/* Literal light fills in reading.css. */
.m2--article .m2-main .blog-media.has-art {
  background: #15161c;
  background: oklch(0.202 0.012 277.8);
  box-shadow: inset 0 0 0 1px #2a2c37;
  box-shadow: inset 0 0 0 1px oklch(0.296 0.020 277.0);
}
.m2--article .m2-main .docs-mobile-nav summary:after { color: #8a8d9c; }

/* Form controls on legacy calculator pages: dark fields, light type, and a
   dark native picker/spinner (color-scheme is a no-op where unsupported). */
.m2--article .m2-main { color-scheme: dark; }
.m2--article .m2-main input,
.m2--article .m2-main select,
.m2--article .m2-main textarea {
  color: #ecedf2;
  background-color: #15161c;
  border-color: #3a3d4a;
}
.m2--article .m2-main input::placeholder,
.m2--article .m2-main textarea::placeholder { color: #8a8d9c; }

/* Photographs and screenshots keep their own colours; a hairline separates a
   light screenshot from the ink around it. */
.m2--article .m2-main .reading img { border-color: #2a2c37; }

/* Inline <code>/<kbd> chips read as raised ink. */
.m2--article .m2-main .reading code,
.m2--article .m2-main .reading kbd { color: #ecedf2; }

/* Focus ring matches the rest of the dark site. */
.m2--article .m2-main :focus-visible {
  outline: 2px solid #8b8ff7;
  outline-offset: 2px;
}