/* auth.css — only overrides/extras Tailwind can't express inline */

* { font-family: 'Inter', sans-serif !important; }

/* Subtle grid background */
.bg-grid {
  background-color: #f8fafc;
  background-image:
    linear-gradient(rgba(59,151,238,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,151,238,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Input focus ring */
.input-field:focus {
  box-shadow: 0 0 0 3px rgba(59,151,238,0.15);
}

/* Card border + shadow — exact spec */
.auth-card {
  border: 0px solid rgb(159,181,195);
  box-shadow:
    rgba(101,119,134,0.20) 0px 0px 12px,
    rgba(101,119,134,0.15) 0px 0px 3px 1px;
}

/* Button lift */
.btn-brand { transition: all 0.2s cubic-bezier(0.4,0,0.2,1); }
.btn-brand:hover  { transform: translateY(-1px); }
.btn-brand:active { transform: translateY(0px); }

/* Stagger fade-up animations */
.anim-0 { opacity:0; animation: fadeUp 0.55s 0.05s ease forwards; }
.anim-1 { opacity:0; animation: fadeUp 0.55s 0.15s ease forwards; }
.anim-2 { opacity:0; animation: fadeUp 0.55s 0.25s ease forwards; }
.anim-3 { opacity:0; animation: fadeUp 0.55s 0.35s ease forwards; }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}