/* LexForge auth pages (signup / login / reset-password) — dark editorial
   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-raised: #211c15;
  --mkt-raised-2: #1d1813;
  --mkt-ink: #ece5d8;
  --mkt-muted: rgba(236, 229, 216, .64);
  --mkt-accent: #c9a86a;
  --mkt-accent-hover: #dbbf8a;
  --mkt-border: rgba(236, 229, 216, .14);
}

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

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

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

/* ── form card ─────────────────────────────────────────────────── */
.auth-body .custom-auth-card {
  background: var(--mkt-raised);
  border-color: var(--mkt-border);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .32);
}
.auth-body .auth-step-copy strong { color: var(--mkt-ink); }
.auth-body .auth-step-copy span { color: var(--mkt-muted); }
.auth-body .custom-auth-card label > span { color: var(--mkt-muted); }
.auth-body .custom-auth-card input {
  background: var(--mkt-bg);
  border-color: var(--mkt-border);
  color: var(--mkt-ink);
}
.auth-body .custom-auth-card input:focus {
  outline: 2px solid var(--mkt-accent);
  outline-offset: 1px;
  border-color: var(--mkt-accent);
}

/* ── buttons ───────────────────────────────────────────────────── */
.auth-body .button.primary {
  background: var(--mkt-accent);
  border-color: var(--mkt-accent);
  color: var(--mkt-bg);
}
.auth-body .button.secondary {
  background: transparent;
  border-color: rgba(236, 229, 216, .3);
  color: var(--mkt-ink);
}
@media (hover: hover) and (pointer: fine) {
  .auth-body .button.primary:hover {
    background: var(--mkt-accent-hover);
    border-color: var(--mkt-accent-hover);
    color: var(--mkt-bg);
  }
  .auth-body .button.secondary:hover {
    background: var(--mkt-ink);
    border-color: var(--mkt-ink);
    color: var(--mkt-bg);
  }
}

/* ── messages + footer links ───────────────────────────────────── */
.auth-body .api-message { color: var(--mkt-accent); }
.auth-body .auth-disclaimer { color: var(--mkt-muted); }
.auth-body .auth-links { color: var(--mkt-muted); }
.auth-body .auth-links a {
  color: var(--mkt-accent);
  border-bottom-color: rgba(201, 168, 106, .4);
}
@media (hover: hover) and (pointer: fine) {
  .auth-body .auth-links a:hover { color: var(--mkt-ink); }
}

/* ── marketing aside ───────────────────────────────────────────── */
.auth-body .auth-copy {
  background: var(--mkt-raised-2);
  border-left: 1px solid var(--mkt-border);
  color: var(--mkt-ink);
}
.auth-body .auth-copy h2 { color: var(--mkt-ink); }
.auth-body .auth-copy p { color: var(--mkt-muted); }

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