/* ============================================================
   FirmChief Auth — shared styling
   ============================================================
   Loaded by every auth screen (sign-up, sign-in, mfa-enroll,
   verify, reset-request, reset-confirm, claim-ownership,
   deny-takeover, accept-takeover). Single-card centered layout.

   Restyled 2026-05-05 to match the Sleek Tech aesthetic locked
   in the main app (Decisions Log 2026-05-04 §2). Reference
   points: Mercury / Stripe / Linear / Vercel. Single typeface
   (Hanken Grotesk), near-white #FAFAFA + near-black #0A0A0A
   + brighter teal #0E7C8F single accent. Amber dropped.

   Variable NAMES preserved from the prior version so any page-
   specific styles that referenced --teal, --grey-pale, etc.
   keep working — only the values changed. New values map to
   the same tokens used in firmchief-finance-v1.html so the
   experience reads as one product across surfaces.

   Per standards.md kebab-case rule: filename is auth.css.
   ============================================================ */


/* ── Reset + base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


/* ── Brand variables ───────────────────────────────────────
   Mirrors firmchief-finance-v1.html's :root tokens. Old
   variable names kept intentionally (--teal, --grey-pale,
   etc.) so per-page overrides don't have to change. */
:root {
  /* Brand — teal/blue-green base (new Sleek Tech palette) */
  --teal:         #0E7C8F;        /* primary accent — was #1A6E82 */
  --teal-mid:     #0E7C8F;        /* deprecated, points at primary */
  --teal-dark:    #094E5B;        /* deeper teal — used for hover + emphasis */
  --teal-light:   #B6E0E7;        /* tinted teal border for soft-emphasis */
  --teal-pale:    #E6F4F6;        /* tinted teal background */

  /* Greys — modern Zinc-leaning, dropped warm cream */
  --grey-dark:    #27272A;        /* near-black for headings */
  --grey:         #52525B;        /* secondary text */
  --grey-light:   #E4E4E7;        /* dividers */
  --grey-pale:    #F4F4F5;        /* soft surface */

  /* Amber — DROPPED from the locked aesthetic. Tokens kept as
     no-ops so anything referencing them keeps building, but
     they resolve to the same teal as everything else so they
     can't visually reintroduce amber. */
  --amber:        #0E7C8F;
  --amber-light:  #E6F4F6;
  --amber-dark:   #094E5B;

  /* Semantic */
  --text:         #0A0A0A;        /* near-black ink */
  --muted:        #52525B;
  --border:       #E4E4E7;
  --white:        #FFFFFF;
  --bg:           #FAFAFA;        /* page background — same as main app */

  /* Status colors for error / success messages */
  --error-bg:     #FEF2F2;
  --error-text:   #991B1B;
  --error-border: #FCA5A5;
  --success-bg:   #ECFDF5;
  --success-text: #065F46;
  --success-border: #A7F3D0;
}


/* ── Page shell ─────────────────────────────────────────── */
/* Body is a centered flexbox so the .auth-card sits in the
   middle of the viewport regardless of card height. */
html, body { height: 100%; }

body {
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: 'tnum' 1;   /* tabular figures — same idiom as the app */
  font-size: 16px;
  color: var(--text);
  line-height: 1.6;
  letter-spacing: -0.005em;
  /* Solid bg matching the app — was a soft teal-pale gradient.
     The new aesthetic prefers flat, clean surfaces over washes. */
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}


/* ── The card ───────────────────────────────────────────── */
/* Crisp single-elevation card. The teal-accent strip on the
   left edge mirrors the cards in the main app and gives the
   auth surface the same brand signature. */
.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(10, 10, 10, 0.04), 0 4px 16px rgba(10, 10, 10, 0.04);
  padding: 40px 36px;
}


/* ── Logo + heading area ───────────────────────────────── */
/* CSS-only "FC" gradient brand mark — same idiom as the app
   topbar. Replaces the prior inline SVG that hardcoded the old
   teal + amber palette. Pages just emit:
       <div class="auth-logo">
         <span class="auth-brand-mark" aria-hidden="true">FC</span>
       </div>
   No inline color references in the page HTML. */
.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.auth-brand-mark {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.04em;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.auth-heading {
  text-align: center;
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.auth-subheading {
  text-align: center;
  margin-bottom: 28px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
}


/* ── Form ───────────────────────────────────────────────── */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.auth-field input {
  font-family: inherit;
  font-feature-settings: 'tnum' 1;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: var(--white);
  transition: border-color 0.12s, box-shadow 0.12s;
}

.auth-field input:focus {
  outline: none;
  border-color: var(--teal);
  /* Soft teal glow on focus — modern fintech idiom. */
  box-shadow: 0 0 0 3px rgba(14, 124, 143, 0.16);
}

.auth-field input:disabled {
  background: var(--grey-pale);
  color: var(--muted);
  cursor: not-allowed;
}


/* ── Primary button ─────────────────────────────────────── */
.auth-button {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 20px;
  background: var(--teal);
  color: var(--white);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, transform 0.08s;
  letter-spacing: 0.005em;
  margin-top: 4px;
}

.auth-button:hover:not(:disabled) { background: var(--teal-dark); }
.auth-button:active:not(:disabled) { transform: scale(0.99); }
.auth-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}


/* ── Status messages (error + success) ──────────────────── */
.auth-status {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  display: none;
}

.auth-status.is-error {
  background: var(--error-bg);
  color: var(--error-text);
  border: 1px solid var(--error-border);
  display: block;
}

.auth-status.is-success {
  background: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success-border);
  display: block;
}


/* ── Footer link area ──────────────────────────────────── */
.auth-footer {
  text-align: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--grey-light);
  font-size: 14px;
  color: var(--muted);
}

.auth-footer a {
  color: var(--teal);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.12s;
}

.auth-footer a:hover { color: var(--teal-dark); text-decoration: underline; }

.auth-link-row {
  text-align: center;
  margin-top: 12px;
  font-size: 14px;
}

.auth-link-row a {
  color: var(--teal);
  text-decoration: none;
  font-weight: 500;
}

.auth-link-row a:hover { color: var(--teal-dark); text-decoration: underline; }


/* ── Mobile tweaks ──────────────────────────────────────── */
@media (max-width: 480px) {
  body { padding: 12px; }
  .auth-card { padding: 28px 22px; border-radius: 10px; }
  .auth-heading { font-size: 22px; }
}