/* ===== Auth (Login / Signup) — Themed to site tokens =====
   Relies on tokens already defined in main.css:
   --brand-500/600, --ink-900/700/500/300/200, --radius, --radius-lg, --shadow-sm/md, --gradient-subtle
================================================================ */

html, body {
  /* same soft backdrop used across the site */
  background: var(--gradient-subtle);
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color: var(--ink-900);
}

/* wrapper centers the card like other sections */
.auth-wrap {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* heading style consistent with hero titles (weight/letter-spacing) */
.auth-title {
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink-900);
}

/* card uses your site radius + shadow + border color */
.auth-card {
  width: 100%;
  max-width: 520px;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

/* inputs and selects match your control styling */
.auth-card .form-control,
.auth-card .form-select {
  border-radius: 10px;              /* soft input radius used elsewhere */
  border-color: var(--ink-200);
  color: var(--ink-900);
}
.auth-card .form-control::placeholder { color: var(--ink-500); }

.auth-card .form-control:focus,
.auth-card .form-select:focus {
  border-color: var(--brand-500);
  /* glow ring in brand tone (brand-500 = #7580FF) */
  box-shadow: 0 0 0 3px rgba(117, 128, 255, .25);
  outline: 0;
}

/* show/hide password button inside input-group */
.input-group .btn-toggle {
  border-color: var(--ink-200);
  color: var(--ink-700);
}
.input-group .btn-toggle:hover {
  border-color: var(--brand-500);
  color: var(--brand-600);
}

/* divider mirrors subtle separators used in features/testimonials */
.divider {
  position: relative;
  text-align: center;
  color: var(--ink-500);
  margin: 1.25rem 0;
}
.divider::before,
.divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 42%;
  height: 1px;
  background: var(--ink-200);
}
.divider::before { left: 0; }
.divider::after  { right: 0; }
.divider span {
  background: #fff;
  padding: 0 .5rem;
}

/* helper text tint */
.text-secondary { color: var(--ink-700) !important; }

/* responsive nicety */
@media (max-width: 575.98px) {
  .auth-card { padding: 18px; }
}