/* Tokens da marca: docs/marca/IDENTIDADE.md */
:root {
  --hk-aizome: #1E3A6E;
  --hk-noite: #0F1B33;
  --hk-shu: #E2492F;
  --hk-shu-claro: #FF6A4D;
  --hk-ardosia: #5A6B8C;
  --hk-nevoa: #DCE3EF;
  --hk-nevoa-escura: #A9B6CF;
  --hk-washi: #F6F4EF;
  --hk-branco: #FFFFFF;
  --hk-fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--hk-fonte);
  color: var(--hk-noite);
  background: var(--hk-washi);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--hk-nevoa); color: var(--hk-noite); }

a { color: var(--hk-aizome); text-underline-offset: 3px; }
a:hover { color: var(--hk-noite); }

:focus-visible { outline: 2px solid var(--hk-aizome); outline-offset: 2px; }

h1:focus { outline: none; }

.carregando {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--hk-ardosia);
}

.aviso-tela {
  max-width: 480px;
  margin: 80px auto;
  padding: 0 16px;
  text-align: center;
  color: var(--hk-ardosia);
  display: grid;
  justify-items: center;
  gap: 16px;
}

/* Botões e campos das telas de cadastro (Números, Equipe e unidades) */
.botao {
  padding: 8px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--hk-aizome);
  color: var(--hk-branco);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.botao:hover:not(:disabled) { background: var(--hk-noite); }
.botao:disabled { opacity: .5; cursor: default; }
.botao.secundario { background: none; color: var(--hk-aizome); border: 1px solid var(--hk-nevoa-escura); }
.botao.secundario:hover:not(:disabled) { background: var(--hk-washi); }
/* Confirmação destrutiva: Noite (Shu não passa em texto pequeno, ver docs/marca). */
.botao.perigo { background: var(--hk-noite); }

.campo {
  padding: 8px 12px;
  border: 1px solid var(--hk-nevoa-escura);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  color: var(--hk-noite);
  background: var(--hk-branco);
}

.erro-texto { color: var(--hk-shu); font-size: 14px; margin: 0; }
.ok-texto { color: var(--hk-aizome); font-size: 14px; margin: 0; }

#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 20px;
  background: var(--hk-noite);
  color: var(--hk-branco);
  z-index: 1000;
}

#blazor-error-ui a { color: var(--hk-nevoa); }

#blazor-error-ui .dismiss {
  position: absolute;
  right: 12px;
  top: 6px;
  background: none;
  border: 0;
  color: var(--hk-branco);
  font-size: 22px;
  cursor: pointer;
}