/* ============================================================================
   ACM Etiquetas — base
   Paleta extraída de logo.png (docs/06-frontend.md)
   ========================================================================= */

:root {
  /* Marca */
  --cor-primaria: #0b1b33;        /* marinho do ícone e da palavra ETIQUETAS */
  --cor-primaria-clara: #16294a;
  --cor-primaria-escura: #060f1f;
  --cor-acao: #0047b3;            /* azul da palavra ACM */
  --cor-acao-clara: #0059db;
  --cor-acao-escura: #003585;
  --cor-cinza-etiqueta: #d6d9de;

  /* Estado */
  --cor-sucesso: #1b8a5a;
  --cor-alerta: #b3261e;
  --cor-aviso: #a76b00;

  /* Neutros */
  --texto: #0b1b33;
  --texto-suave: #5b6470;
  --borda: #dfe3e8;
  --fundo: #ffffff;
  --fundo-suave: #f6f8fa;

  --raio: 8px;
  --raio-g: 14px;
  --sombra: 0 1px 3px rgb(0 0 0 / .08);
  --sombra-g: 0 8px 24px rgb(0 0 0 / .12);

  --esp-1: .25rem; --esp-2: .5rem;  --esp-3: .75rem;
  --esp-4: 1rem;   --esp-6: 1.5rem; --esp-8: 2rem; --esp-12: 3rem;

  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --largura-max: 1280px;
  --cabecalho-altura: 72px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--esp-3); line-height: 1.25; font-weight: 700; }
h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); }
h3 { font-size: 1.1rem; }
p  { margin: 0 0 var(--esp-4); }

a { color: var(--cor-acao); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--esp-4); padding-left: 1.25rem; }
li { margin-bottom: var(--esp-1); }

/* Foco sempre visível: nunca remover outline sem substituto. */
:focus-visible {
  outline: 2px solid var(--cor-acao-clara);
  outline-offset: 2px;
  border-radius: 3px;
}

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--esp-4);
}

.conteudo { min-height: 60vh; padding-block: var(--esp-8); }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--cor-acao); color: #fff;
  padding: var(--esp-3) var(--esp-4); border-radius: 0 0 var(--raio) 0;
}
.pular-para-conteudo:focus { left: 0; }

.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.corpo-centralizado {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--fundo-suave); padding: var(--esp-4);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Faixa de aviso quando a loja está em manutenção e o admin está logado. */
.faixa-manutencao {
  background: #a76b00; color: #fff; text-align: center;
  padding: .6rem 1rem; font-size: .92rem; font-weight: 500;
}
.faixa-manutencao a { color: #fff; text-decoration: underline; }