/* ============================================================
   bt-auth.css — the sign-in flow, re-skinned to match the public
   "BennieTools for Brokers" landing page (home.php).

   ADDITIVE. Loaded AFTER assets/style.css (and after the inline
   agency_theme_css/TOTP <style> blocks), so it re-themes rather than
   replaces: every existing .auth-* / .form / .btn / .banner rule keeps
   working, it just wears the landing palette and type.

   Most of the work is done by re-pointing style.css's OWN tokens at the
   landing values, so components we never name here — including the
   TOTP-only rules that live inline on totp-challenge/totp-setup — follow
   along instead of being left purple.

   Loaded by: login, totp-challenge, totp-setup, forgot-password,
   reset-password. Nothing else links it, so these overrides cannot leak
   into the app proper.
   ============================================================ */

:root {
  /* style.css tokens, re-pointed at the landing page's palette. */
  --ink:        #0F1917;
  --brand:      #1B6B58;   /* landing --accent     */
  --brand-deep: #0F4437;   /* landing --accent-ink */
  --brand-soft: #DDEBE5;   /* landing --accent-soft*/
  --gold:       #8F671D;   /* landing --brass      */
  --gold-deep:  #6E4E14;
  --gold-soft:  #EFE4CB;   /* landing --brass-soft */
  --canvas:     #EFF2F0;   /* landing --ground     */
  --surface:    #FFFFFF;
  --muted:      #647570;
  --line:       #D3DBD7;
  --line-soft:  #E5EAE7;
  --danger:     #A8323F;
  --ring:       rgba(27,107,88,.30);

  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --radius:    14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(15,25,23,.05), 0 14px 34px -20px rgba(15,25,23,.28);

  /* Landing-only tokens this file needs by name. */
  --bta-ink-2:   #384844;
  --bta-line-2:  #B4C1BC;
  --bta-prose:   'Source Serif 4', Georgia, 'Times New Roman', serif;
  --bta-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Dark mode, mirroring home.php: the default "system" setting stamps no
   attribute, so honour prefers-color-scheme unless light is forced. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:#E4EBE8; --brand:#59C0A2; --brand-deep:#B6E5D5; --brand-soft:#14302A;
    --gold:#D4A857; --gold-deep:#E8C88A; --gold-soft:#2A2214;
    --canvas:#0B1412; --surface:#111C19; --muted:#84958F;
    --line:#213029; --line-soft:#182722; --danger:#E0808C;
    --ring:rgba(89,192,162,.30);
    --bta-ink-2:#B2C1BC; --bta-line-2:#32463E;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 34px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] {
  --ink:#E4EBE8; --brand:#59C0A2; --brand-deep:#B6E5D5; --brand-soft:#14302A;
  --gold:#D4A857; --gold-deep:#E8C88A; --gold-soft:#2A2214;
  --canvas:#0B1412; --surface:#111C19; --muted:#84958F;
  --line:#213029; --line-soft:#182722; --danger:#E0808C;
  --ring:rgba(89,192,162,.30);
  --bta-ink-2:#B2C1BC; --bta-line-2:#32463E;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 34px -20px rgba(0,0,0,.8);
}

/* ---------- shell ---------- */
/* The purple hexagon blobs are the old identity; the landing page has no
   ambient shapes, so drop them rather than recolour them. */
.auth-body::before, .auth-body::after { display: none !important; }
.auth-body { background: var(--canvas); }

.auth-shell { max-width: 420px; }

.auth-card {
  border-radius: 16px;
  border: 1px solid var(--line);
  padding: clamp(1.7rem, 5vw, 2.4rem);
}

/* Wordmark in place of the old raster logo — the same lockup as the landing
   page masthead (.brand there), so the two pages read as one product. It links
   home, which is also the return leg for the landing page's "Sign in". */
.auth-wordmark {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  margin: 0 0 1.6rem; text-decoration: none; color: var(--ink);
}
.auth-wordmark strong {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  letter-spacing: -0.02em;
}
.auth-wordmark span {
  font-family: var(--bta-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.auth-wordmark:hover strong { color: var(--brand); }

.auth-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 1.95rem);
  letter-spacing: -0.022em;
  line-height: 1.1;
}
/* Serif for the one line of prose, exactly as the landing page sets copy. */
.auth-sub {
  font-family: var(--bta-prose);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--bta-ink-2);
  margin-bottom: 1.6rem;
}

/* ---------- form ---------- */
.field-label {
  font-family: var(--bta-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.field-hint { font-family: var(--bta-mono); font-size: 10.5px; letter-spacing: .04em; }

.input {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 0.7rem 0.8rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color .16s, box-shadow .16s;
}
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
/* Chrome paints its own autofill background, which fights the card. */
.input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 40px var(--surface) inset; }

.btn {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: var(--radius-sm);
}
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn-block { padding: 0.75rem 1rem; font-size: 0.95rem; }
/* Dark mode flips --brand light, so ink-on-accent is the readable pairing. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary { color: #08130F; }
}
:root[data-theme="dark"] .btn-primary { color: #08130F; }

/* ---------- messages ---------- */
.banner {
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  border: 1px solid var(--line);
  background: var(--line-soft);
  color: var(--ink);
}
.banner-ok    { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-deep); }
.banner-error { background: var(--gold-soft);  border-color: var(--gold);  color: var(--gold-deep); }

/* ---------- footers / secondary links ---------- */
.auth-alt  { font-family: var(--bta-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.auth-alt a { color: var(--brand); font-weight: 500; }
.auth-foot { font-family: var(--bta-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--muted); }


@media (prefers-reduced-motion: reduce) { .input { transition: none; } }