/**
 * Payer-audit-style theme overlay for @genesis/ui consumers.
 *
 * **As of v0.22, the document baseline (compact 14px body, brand
 * font, washed-lilac background, heading + link resets) is shipped
 * by tokens.css itself.** This overlay therefore no longer carries
 * those rules — they are not duplicated here. What remains are
 * specific-use utility classes (`.az-split-page`, `.az-accent-dot`,
 * `.az-nano-label`, `.az-tagline`) ported from the payer-audit
 * reference (~/work/apps/payer-audit/src/payer_audit/static/styles.css)
 * which still need an opt-in link because they target specific page
 * shapes (login two-pane, footer chrome) rather than every document.
 *
 * Usage:
 *
 *   <link rel="stylesheet" href="@genesis/ui/dist/tokens.css">
 *   <!-- only add this line if you need the .az-split-page family: -->
 *   <link rel="stylesheet" href="@genesis/ui/dist/styles/themes/payer-audit.css">
 *
 * The overlay depends on tokens.css being linked first so the
 * `--azp-*` and `--az-*` tokens resolve. Order matters.
 *
 * The overlay does NOT ship PPNeue Montreal font files — licensing
 * requires per-consumer agreement. See the `@font-face` reference
 * block at the bottom of this file; paste it into your global
 * stylesheet and host the woff2 files under your own /static/fonts/
 * (or equivalent CDN path).
 */

/* =========================================================
 * Two-pane login / standalone-page layout
 * =========================================================
 *
 * Ported from payer-audit's `.login-*` family
 * (static/styles.css L107-227 in the reference repo). Kept as a
 * loose set of utility classes — not a component — because the
 * shape recurs across internal tools (login, locked-tenant, error
 * pages) and reaching for a full `<gn-*>` would over-fit.
 *
 * Dark stage on the left, light form on the right. Collapses to a
 * single column under 768px.
 */

.az-split-page {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 480px);
  min-height: 100vh;
  margin: 0;
  background: var(--az-background);
  font-family: var(--az-font-body);
}

@media (max-width: 768px) {
  .az-split-page {
    grid-template-columns: 1fr;
  }
}

.az-split-stage {
  background: var(--az-background-dark);
  color: var(--az-on-background-dark);
  padding: var(--az-space-xl) var(--az-space-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--az-space-md);
}

.az-split-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--az-space-lg);
  background: var(--az-background);
}

/* Gold accent dot — once per page; pairs with footer attribution. */
.az-accent-dot {
  width: 8px;
  height: 8px;
  background: var(--az-accent);
  border-radius: var(--az-radius-pill);
  margin-right: var(--az-space-xs);
  display: inline-block;
}

/* Mono-uppercase nano-label. Use for "POWERED BY", breadcrumbs,
 * attributions — the recurring 9-11px mono micro-chrome. */
.az-nano-label {
  font-family: var(--az-font-mono);
  font-size: var(--azp-label-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.55;
}

/* Tagline + sub — large display tagline for the dark stage. */
.az-tagline {
  font-family: var(--az-font-display);
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: var(--az-weight-regular);
  margin-top: var(--az-space-md);
}
.az-tagline-sub {
  font-size: var(--az-body-md);
  opacity: 0.75;
  margin-top: var(--az-space-xs);
}

/* =========================================================
 * @font-face reference (paste-and-host)
 * =========================================================
 *
 * The overlay does not embed the PPNeue Montreal woff2 files.
 * Drop the four weights into your app's static directory and
 * declare matching `@font-face` rules. Recommended block:
 *
 *   @font-face {
 *     font-family: "PPNeue Montreal";
 *     src: url("/static/fonts/PPNeueMontreal-Regular.woff2") format("woff2");
 *     font-weight: 400;
 *     font-display: swap;
 *   }
 *   @font-face {
 *     font-family: "PPNeue Montreal";
 *     src: url("/static/fonts/PPNeueMontreal-Medium.woff2") format("woff2");
 *     font-weight: 500;
 *     font-display: swap;
 *   }
 *   @font-face {
 *     font-family: "PPNeue Montreal";
 *     src: url("/static/fonts/PPNeueMontreal-Bold.woff2") format("woff2");
 *     font-weight: 700;
 *     font-display: swap;
 *   }
 *
 * The fallback chain in --az-font-body / --az-font-display
 * resolves to Manrope (if locally installed) or system-ui until
 * PPNeue Montreal loads, so the layout does not shift on cold
 * load. Licensing for the font is handled per-consumer.
 */