/* =====================================================================
   CAMADA AIA — o que o token sozinho nao resolve

   Carregar DEPOIS de painel.css. Tudo o que e cor, fonte, raio e sombra
   ja mudou em tokens.css; aqui ficam so as tres coisas que sao FORMA da
   identidade da AiA e nao valor:

     1. titulos em Sora
     2. acao principal com o degrade da marca
     3. a faixa de cor no topo

   Arquivo pequeno de proposito. Se uma regra daqui comecar a corrigir
   layout, ela esta no arquivo errado - layout mora em painel.css.
   ===================================================================== */

/* Onde o CSS pede peso que a fonte nao tem (mono em 600), usa o mais
   proximo em vez de o navegador inventar um negrito borrado. Ver
   fontes.css: so os pesos em uso sao baixados. */
body { font-synthesis-weight: none; }

/* ---- 1. titulos em Sora ---- */
h1, h2, h3,
.topo-titulo,
.entrada-titulo,
.caixa-titulo,
.dialogo-titulo,
.ponto-titulo {
  font-family: var(--ft-fonte-titulo);
  letter-spacing: -0.02em;
}

/* ---- 2. a acao principal com o degrade ----
   O degrade vai de #5A67D8 a #764BA2, e nao de #667EEA: o indigo puro
   da AiA da 3,66:1 com texto branco e reprova. Contas em tokens.css. */
button.principal {
  background: var(--ft-degrade);
  border-color: transparent;
  color: var(--ft-branco);
  box-shadow: 0 4px 14px rgba(90, 103, 216, .28);
}
button.principal:hover:not(:disabled) {
  background: var(--ft-degrade);
  filter: brightness(1.07);
  box-shadow: 0 6px 20px rgba(90, 103, 216, .36);
}
button.principal:active:not(:disabled) { filter: brightness(.97); }

/* ---- 3. a faixa de cor no topo ----
   A assinatura do cabecalho da AiA: uma linha de 3px com as cores de
   estado. No telefone e o topo; no computador, o alto da barra lateral.
   Enfeite que nao custa leitura: nao ha texto sobre ela. */
/* SEM `position` aqui. `.topo` e sticky e `.lateral` e fixa: as duas ja
   sao posicionadas, e o pseudo-elemento se ancora nelas. Declarar
   `relative` desligaria o topo grudado e a gaveta do telefone. */
.topo::after,
.lateral::before {
  content: '';
  position: absolute; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #059669 0%, #D97706 25%, #DC2626 50%, #0284C7 75%, #764BA2 100%);
  pointer-events: none;
}
.topo::after   { bottom: -1px; }
.lateral::before { top: 0; }

/* No computador o topo vira so o titulo, sem posicao propria (ver o
   bloco de 721px em painel.css). O traco se prenderia a pagina inteira e
   iria parar no rodape. La a faixa fica so no alto da barra lateral. */
@media (min-width: 721px) {
  .topo::after { display: none; }
}

/* Item ativo da navegacao: o degrade suave e a borda da AiA. */
.lateral-item[aria-current="page"] {
  background: var(--ft-degrade-suave);
  color: var(--ft-marca-400);
}