/* Estilos da tela de login. Depende de tokens.css e components.css. */

.login-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  padding: var(--sp-6);
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--primary-soft), transparent 60%),
    var(--surface-2);
}

.login-card {
  width: 100%;
  max-width: 420px;
  padding: var(--sp-8);
  box-shadow: var(--shadow-lg);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.login-brand .brand-badge {
  width: 40px;
  height: 40px;
  font-size: var(--fs-base);
  background: var(--primary-soft);
  color: var(--primary);
}

.login-title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  line-height: 1.1;
}

.login-sub {
  font-size: var(--fs-sm);
}

.login-h1 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-2);
}

.login-lead {
  font-size: var(--fs-base);
  margin-bottom: var(--sp-6);
}

.google-btn {
  padding: var(--sp-3) var(--sp-4);
  font-weight: var(--fw-medium);
  border-color: var(--border-strong);
}

.google-btn:hover {
  background: var(--surface);
}

.login-note {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

#alert {
  margin-bottom: var(--sp-4);
}

.login-footer {
  font-size: var(--fs-xs);
}