/* ── Telas de autenticação (login, definir senha, erro) ──────────────────
   Mesmo cartão de marca do login do Peers Deck: fundo azul da marca, cartão
   um tom mais escuro, logo lime, botão lime. É sempre escuro — nos dois
   temas — porque é uma superfície de marca, não de trabalho.
   Só tokens (tokens.css) e aliases (theme.css). Nenhuma cor fixa. */

* { box-sizing: border-box; }
[hidden], .hidden { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3);
  background: var(--color-brand-blue);
  color: var(--color-brand-white);
  font-family: var(--fn);
  line-height: 1.5;
}

.login-box, .box {
  width: 100%;
  max-width: 400px;
  padding: var(--spacing-5) var(--spacing-4);
  background: color-mix(in srgb, var(--color-brand-blue) 88%, var(--color-neutral-900));
  border: 1px solid color-mix(in srgb, var(--color-brand-white) 10%, transparent);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-lg);
}
.box { text-align: center; }

.login-brand, .brand { text-align: center; margin-bottom: var(--spacing-4); }
.login-brand img, .brand img { width: 150px; height: auto; margin-bottom: var(--spacing-2); opacity: 0.95; }
.login-brand h1, .brand h1, .box h1 {
  margin: 0;
  font-family: var(--fh);
  font-size: var(--typography-font-size-md);
  font-weight: var(--typography-font-weight-bold);
  letter-spacing: 0.08em;
  color: var(--color-brand-white);
}
.brand h1 { margin-bottom: var(--spacing-1); letter-spacing: 0.02em; font-size: var(--typography-font-size-lg); }
.brand p, .box p {
  margin: 0;
  font-size: var(--typography-font-size-sm);
  color: color-mix(in srgb, var(--color-brand-white) 72%, transparent);
}
.box h1 { color: var(--color-semantic-error-light); margin-bottom: var(--spacing-1); letter-spacing: 0.02em; }
.box a {
  display: inline-block;
  margin-top: var(--spacing-3);
  color: var(--color-brand-lime);
  font-size: var(--typography-font-size-sm);
  font-weight: var(--typography-font-weight-semibold);
}

.form-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--typography-font-size-xs);
  font-weight: var(--typography-font-weight-semibold);
  color: color-mix(in srgb, var(--color-brand-white) 78%, transparent);
}
.form-input {
  width: 100%;
  margin-bottom: var(--spacing-2);
  padding: 10px 12px;
  font-family: var(--fn);
  font-size: var(--typography-font-size-sm);
  color: var(--color-brand-white);
  background: color-mix(in srgb, var(--color-brand-white) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-brand-white) 22%, transparent);
  border-radius: var(--border-radius-md);
}
.form-input:focus {
  outline: none;
  border-color: var(--color-brand-lime);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-lime) 30%, transparent);
}

.btn-entrar, .btn-ok {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: var(--border-radius-md);
  background: var(--color-brand-lime);
  color: var(--color-brand-blue);
  font-family: var(--fn);
  font-size: var(--typography-font-size-md);
  font-weight: var(--typography-font-weight-bold);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-entrar:hover, .btn-ok:hover { background: color-mix(in srgb, var(--color-brand-lime) 85%, var(--color-brand-blue)); }
.btn-entrar:focus-visible, .btn-ok:focus-visible { outline: 2px solid var(--color-brand-white); outline-offset: 2px; }

.btn-sso { display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-sso:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-sso svg { flex: none; }

.erro-msg {
  margin-bottom: var(--spacing-2);
  padding: 10px 12px;
  border-radius: var(--border-radius-md);
  font-size: var(--typography-font-size-sm);
  color: var(--color-semantic-error-light);
  background: color-mix(in srgb, var(--color-semantic-error-main) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-semantic-error-main) 40%, transparent);
}

.login-rodape {
  margin-top: var(--spacing-3);
  text-align: center;
  font-size: var(--typography-font-size-xs);
  color: color-mix(in srgb, var(--color-brand-white) 65%, transparent);
}