/* Mesma pilha do --fonte-display/--fonte-corpo do theme.css. Literal
   porque esta tela não carrega o theme.css (ver inventário 30/09). */
@import url('tokens.css');

/* Mesma identidade visual da tela de login (fundo carvão + acento chama). */

:root {
  --flame: var(--primary);
  --char-2: var(--neutro-950);
  --kraft-text: var(--neutro-000);
  --ink-muted: var(--sidebar-text-muted);
  --border-claro: rgba(255, 255, 255, 0.12);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  background-color: var(--char-2);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.recovery-container {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.brand-logo-icon {
  height: 36px;
  width: auto;
  object-fit: contain;
}

.brand-name {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  /* A escrita e o desenho DELA, nao uma fonte: entra como imagem. O texto
     continua no HTML, so sai da vista. 5.905 e a razao largura/altura do PNG. */
  display: inline-block;
  height: 23px;
  width: calc(23px * 5.905);
  background: url('imgs/escrita-branca.png') no-repeat left center / contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}

.brand-dark { color: var(--kraft-text); }
.brand-red { color: var(--flame); }

.recovery-card {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-claro);
  border-radius: 16px;
  padding: 36px 32px;
  width: 100%;
  text-align: center;
}

.card-title {
  font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--texto-sobre-cor);
  margin-bottom: 12px;
}

.card-subtitle {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* Os três passos de quem perdeu a senha — a página só dizia "fale com o
   administrador" e parava aí (QA 22/09) */
.recovery-passos {
  margin: 20px 0 0;
  padding-left: 20px;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-muted);
}

.recovery-passos li + li { margin-top: 8px; }

.recovery-passos strong { color: var(--texto-sobre-cor); font-weight: 700; }

.card-footer { margin-top: 24px; }

/* Alvo de toque de 44px. O link tem 13px de altura de texto; no dedo
   isso é um alvo de 13px, que erra. O padding negativo na margem
   mantém o espaçamento visual igual ao que era (medido em 375px,
   30/09). */
.link-back {
  color: var(--flame);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
  margin: -12px 0;
}

.link-back:hover { text-decoration: underline; }

/* O NOME, em duas fontes (30/09). "Adm" recua: sem serifa e a 78 por
   cento do tamanho. "Food" avança: serifa macia com o eixo `wonk`, que
   torce as letras de propósito. Alinhado pela base, senão a parte menor
   flutua no meio da maior. Repetido aqui porque esta tela não carrega o
   theme.css — os tokens vêm do tokens.css. */
.brand-name .brand-dark {
  display: inline-block;
  /* O ponto do "Adm." saiu a pedido dela (30/09). Ele dava o respiro
     entre as duas fontes; sem ele o "m" encosta no "F" e a troca
     parece acidente. Este margin é esse respiro, na medida do ponto. */
  margin-right: 0.055em;
  vertical-align: baseline;
  font-family: var(--fonte-nome-adm);
  font-weight: 800;
  font-size: 0.78em;
  letter-spacing: -0.02em;
}

.brand-name .brand-red {
  display: inline-block;
  vertical-align: baseline;
  font-family: var(--fonte-nome-food);
  font-weight: 700;
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  letter-spacing: -0.01em;
}