/* ============ Marketing v2 — dark account funnel ============
 * Login, signup, password recovery, email verification, checkout,
 * confirmation and onboarding — the pages a prospect reaches from the dark
 * marketing nav ("Log in", "Start free trial") — so the hop from a dark page
 * into the funnel never flashes to a light one.
 *
 * Loaded by account/base_auth.html's `m2_auth_skin` block. Pages that are NOT the public funnel override
 * that block to nothing and keep the light app look: the three borrower pages
 * (they mirror the borrower's report, like the Sample Report) and the
 * signed-in-only screens (upgrade, change password, OAuth consent).
 *
 * How: auth_v2.css and components.css draw almost every colour through the
 * --c-* tokens, so re-pointing those on body.auth-body re-skins the funnel
 * without touching either file. Replacements are HEX (a var() resolving to hex
 * is valid on the CSS floor browser, unlike the oklch originals — CLAUDE.md
 * §4.13 bite #2). Rules that hard-code a light colour are overridden below,
 * hex first, then a literal oklch() where the colour is load-bearing.
 *
 * Palette = m2.css's tokens; every text pair is >= 4.5:1 on its surface.
 */

body.auth-body {
  --c-bg: #0d0e12;
  --c-bg-soft: #0d0e12;
  --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;
  background: #0d0e12;
  background: oklch(0.165 0.009 274.3);
  color: #ecedf2;
  color-scheme: dark;
}

/* The brand mark is a black SVG; the marketing nav uses its white twin. */
body.auth-body .auth-brand .brand-mark { filter: invert(1); }

/* --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. */
body.auth-body .btn-accent,
body.auth-body .btn-accent:disabled,
body.auth-body .btn-accent[disabled] {
  background: #5b5fe0;
  background: oklch(0.555 0.192 276.8);
  color: #ffffff;
}
body.auth-body .btn-accent:hover {
  background: #4b4fd0;
  background: oklch(0.504 0.195 275.5);
}

/* Form fields: dark fill, light type, dark native controls. */
body.auth-body input,
body.auth-body select,
body.auth-body textarea {
  color: #ecedf2;
  background-color: #1a1b22;
  border-color: #3a3d4a;
}
body.auth-body input::placeholder,
body.auth-body textarea::placeholder { color: #8a8d9c; }
body.auth-body input[type="checkbox"],
body.auth-body input[type="radio"] { background-color: transparent; }

/* Status boxes: auth_v2.css / checkout_v2.css pair a token fill with a
   literal DARK text colour, which would vanish on the dark fills above. */
body.auth-body .auth-card .errorlist,
body.auth-body .auth-messages .error,
body.auth-body .checkout-error {
  color: #f3a59b;
  border-color: #5a2a24;
}
body.auth-body .auth-alert,
body.auth-body .auth-messages .warning {
  color: #ecc77f;
  border-color: #4d3d1c;
}
body.auth-body .auth-messages .success {
  color: #8fe0b5;
  border-color: #1f4a34;
}

/* Modal backdrops were tuned for a light page. */
body.auth-body .modal,
body.auth-body .modal-overlay { background: rgba(0, 0, 0, 0.6); }

body.auth-body :focus-visible {
  outline: 2px solid #8b8ff7;
  outline-offset: 2px;
}