/* LexForge auth pages (signup / login / reset-password) — paper reskin matching
   the marketing-v2 public site. Loads AFTER lexforge-site.css and overrides
   surfaces and colours only; layout, element IDs and behaviour stay with the
   base auth styles so the Clerk flows are untouched.
   Token values mirror marketing-v2.css :root (auth pages do not load that
   file, so the needed subset is duplicated here). */

:root {
  --mkt-bg: #171410;
  --mkt-ink-hover: #302820;
  --mkt-paper: #f5f1e8;
  --mkt-paper-raised: #f0eade;
  --mkt-paper-ink: #26211a;
  --mkt-paper-muted: rgba(38, 33, 26, .68);
  /* Same AA-checked accent as the public site: 4.94:1 on paper, 4.64:1 on
     --mkt-paper-raised. Do not lighten it. */
  --mkt-paper-accent: #7f6434;
  --mkt-paper-border: rgba(38, 33, 26, .14);
}

body.auth-body {
  background: var(--mkt-paper);
  color: var(--mkt-paper-ink);
  color-scheme: light;
}

/* ── brand + back link ─────────────────────────────────────────── */
.auth-body .auth-brand { color: var(--mkt-paper-ink); }
.auth-body .auth-brand .brand-mark {
  border-color: var(--mkt-paper-accent);
  color: var(--mkt-paper-accent);
}
.auth-body .auth-home-link { color: var(--mkt-paper-muted); }
@media (hover: hover) and (pointer: fine) {
  .auth-body .auth-home-link:hover { color: var(--mkt-paper-accent); }
}

/* ── headings ──────────────────────────────────────────────────── */
.auth-body .auth-panel > div > h1 { color: var(--mkt-paper-ink); }
.auth-body .auth-panel > div > p { color: var(--mkt-paper-muted); }

/* ── form card ─────────────────────────────────────────────────── */
/* Paper ground, raised card, white fields: three steps so the form reads as a
   surface rather than a floating outline. */
.auth-body .custom-auth-card {
  background: var(--mkt-paper-raised);
  border-color: var(--mkt-paper-border);
  box-shadow: 0 12px 34px rgba(38, 33, 26, .07);
}
.auth-body .auth-step-copy strong { color: var(--mkt-paper-ink); }
.auth-body .auth-step-copy span { color: var(--mkt-paper-muted); }
.auth-body .custom-auth-card label > span { color: var(--mkt-paper-muted); }
.auth-body .custom-auth-card input {
  background: #fff;
  border-color: rgba(38, 33, 26, .22);
  color: var(--mkt-paper-ink);
}
.auth-body .custom-auth-card input::placeholder { color: rgba(38, 33, 26, .45); }
.auth-body .custom-auth-card input:focus {
  outline: 2px solid var(--mkt-paper-accent);
  outline-offset: 1px;
  border-color: var(--mkt-paper-accent);
}

/* ── buttons ───────────────────────────────────────────────────── */
/* Same pair as .mkt-button / .mkt-button-secondary on the public site. */
.auth-body .button.primary {
  background: var(--mkt-bg);
  border-color: var(--mkt-bg);
  color: var(--mkt-paper);
}
.auth-body .button.secondary {
  background: transparent;
  border-color: rgba(38, 33, 26, .3);
  color: var(--mkt-paper-ink);
}
@media (hover: hover) and (pointer: fine) {
  .auth-body .button.primary:hover {
    background: var(--mkt-ink-hover);
    border-color: var(--mkt-ink-hover);
    color: var(--mkt-paper);
  }
  .auth-body .button.secondary:hover {
    background: rgba(38, 33, 26, .04);
    border-color: rgba(38, 33, 26, .6);
    color: var(--mkt-paper-ink);
  }
}

/* ── messages + footer links ───────────────────────────────────── */
/* .api-message keeps the base oxblood: it was only overridden because oxblood
   was unreadable on the old near-black panel. On paper it reads correctly. */
.auth-body .auth-links { color: var(--mkt-paper-muted); }
.auth-body .auth-links a {
  color: var(--mkt-paper-accent);
  border-bottom-color: rgba(127, 100, 52, .45);
}
@media (hover: hover) and (pointer: fine) {
  .auth-body .auth-links a:hover { color: var(--mkt-paper-ink); }
}

/* ── marketing aside ───────────────────────────────────────────── */
/* The base sheet paints this panel dark. On paper it becomes a raised band,
   separated by a rule rather than by inverted colour. */
.auth-body .auth-copy {
  background: var(--mkt-paper-raised);
  border-left: 1px solid var(--mkt-paper-border);
  color: var(--mkt-paper-ink);
}
.auth-body .auth-copy h2 { color: var(--mkt-paper-ink); }
.auth-body .auth-copy p { color: var(--mkt-paper-muted); }

@media (max-width: 900px) {
  .auth-body .auth-copy {
    border-left: none;
    border-bottom: 1px solid var(--mkt-paper-border);
  }
}