/*
 * Tela de login do CMS.
 *
 * Os valores são transcritos de `apps/web/src/tokens/tokens.css`, não
 * reinventados — o painel é a primeira coisa que a equipe editorial vê todo
 * dia, e ele destoar da marca do site é ruído gratuito.
 *
 * Transcrição, e não `@import`: o wp-admin não compartilha folha de estilo
 * com o Next, e puxar CSS do site para cá criaria dependência de rede numa
 * tela que precisa abrir mesmo com o front fora do ar.
 *
 * O par creme-sobre-magenta só aparece em display grande (o logo), nunca em
 * texto de leitura — 3,1:1 reprova no 4,5:1 da QA-002. Texto sobre magenta é
 * sempre ink.
 */

:root {
  --ff-ink: #0a0a0a;
  --ff-papel: #f3efe4;
  --ff-papel-alt: #ebe6d8;
  --ff-magenta: #d64c8f;
  --ff-amarelo: #ffb000;
  --ff-borda: 2px;
}

body.ff2026-login {
  background: var(--ff-ink);
  color: var(--ff-papel);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Estrelas da marca ao fundo, discretas. Decoração pura: `background`, não
   elemento, para não entrar na árvore de acessibilidade. */
body.ff2026-login::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('../img/estrela.svg');
  background-repeat: no-repeat;
  background-position: 12% 18%;
  background-size: 90px;
  opacity: 0.16;
  pointer-events: none;
}

body.ff2026-login::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('../img/estrela.svg');
  background-repeat: no-repeat;
  background-position: 88% 82%;
  background-size: 140px;
  opacity: 0.1;
  pointer-events: none;
}

/* ── Logo ─────────────────────────────────────────────────────────────── */

.ff2026-login #login h1 a {
  width: 260px;
  height: 62px;
  margin: 0 auto 14px;
  background-image: url('../img/logo.svg');
  background-size: contain;
  background-position: center;
}

.ff2026-login #login {
  width: 340px;
  padding: 6% 0 4%;
}

/* ── Recado acima do formulário ───────────────────────────────────────── */

.ff2026-login .ff-recado {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--ff-papel);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  opacity: 0.72;
}

/* ── Caixa do formulário ──────────────────────────────────────────────── */

/*
 * Cantos vivos e borda cheia: "brutalismo tipográfico, corte seco" da direção
 * de arte. O WordPress traz canto arredondado e sombra suave — os dois saem.
 */
.ff2026-login .login form {
  border: var(--ff-borda) solid var(--ff-papel);
  border-radius: 0;
  background: var(--ff-papel);
  box-shadow: 8px 8px 0 var(--ff-magenta);
  color: var(--ff-ink);
}

.ff2026-login .login form label,
.ff2026-login .login form .forgetmenot label {
  color: var(--ff-ink);
  font-size: 14px;
  font-weight: 600;
}

.ff2026-login .login form .input,
.ff2026-login .login input[type='text'],
.ff2026-login .login input[type='password'] {
  border: var(--ff-borda) solid var(--ff-ink);
  border-radius: 0;
  background: var(--ff-papel-alt);
  color: var(--ff-ink);
  font-size: 16px; /* 16px evita o zoom automático do iOS ao focar. */
}

.ff2026-login .login form .input:focus,
.ff2026-login .login input[type='text']:focus,
.ff2026-login .login input[type='password']:focus {
  border-color: var(--ff-magenta);
  /* Foco visível sem `outline: none`: QA-002 exige indicador de foco. */
  outline: 3px solid var(--ff-amarelo);
  outline-offset: 1px;
  box-shadow: none;
}

/* ── Botão ────────────────────────────────────────────────────────────── */

.ff2026-login .wp-core-ui .button-primary {
  border: var(--ff-borda) solid var(--ff-ink);
  border-radius: 0;
  background: var(--ff-magenta);
  /* ink sobre magenta = 5,5:1. Creme sobre magenta reprovaria. */
  color: var(--ff-ink);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: none;
  box-shadow: none;
  /* "hover seco — inverter as cores instantaneamente, sem transições." */
  transition: none;
}

.ff2026-login .wp-core-ui .button-primary:hover,
.ff2026-login .wp-core-ui .button-primary:focus {
  background: var(--ff-ink);
  color: var(--ff-papel);
  border-color: var(--ff-papel);
  outline: 3px solid var(--ff-amarelo);
  outline-offset: 1px;
  box-shadow: none;
}

/* ── Links de apoio ───────────────────────────────────────────────────── */

.ff2026-login #nav,
.ff2026-login #backtoblog {
  padding: 10px 0 0;
  text-align: center;
}

.ff2026-login #nav a,
.ff2026-login #backtoblog a,
.ff2026-login .privacy-policy-page-link a {
  color: var(--ff-papel);
  opacity: 0.75;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ff2026-login #nav a:hover,
.ff2026-login #nav a:focus,
.ff2026-login #backtoblog a:hover,
.ff2026-login #backtoblog a:focus {
  color: var(--ff-amarelo);
  opacity: 1;
}

/* ── Mensagens ────────────────────────────────────────────────────────── */

.ff2026-login .login .message,
.ff2026-login .login #login_error {
  border: var(--ff-borda) solid var(--ff-ink);
  border-left-width: 6px;
  border-radius: 0;
  background: var(--ff-papel);
  color: var(--ff-ink);
  box-shadow: none;
}

.ff2026-login .login #login_error {
  border-left-color: var(--ff-magenta);
}

.ff2026-login .login .message {
  border-left-color: var(--ff-amarelo);
}

/* Respeita quem pediu menos movimento. */
@media (prefers-reduced-motion: reduce) {
  .ff2026-login * {
    animation: none !important;
    transition: none !important;
  }
}