/* ============================================================
   base.css — reset, tipografia, layout e utilitários.
   Depende de tokens.css. Ver FRONTEND.md. Mobile-first.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--fonte);
  font-size: var(--texto-md);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

a { color: var(--cor-acao); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

:focus-visible { outline: 2px solid var(--cor-acao); outline-offset: 2px; }

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

/* ---------- Tipografia de página ---------- */
.titulo-pagina { font-size: 1.4rem; font-weight: 600; margin: var(--esp-4) 0; }
.subtitulo { font-size: var(--texto-md); font-weight: 600; margin-bottom: var(--esp-3); }
.breadcrumb { font-size: var(--texto-xs); color: var(--cor-texto-suave); padding: var(--esp-3) 0; }

/* ---------- Skeleton (FRONTEND.md §3) ---------- */
.skeleton { background: var(--cor-borda); border-radius: var(--raio); animation: pulso 1.2s infinite ease-in-out; }
@keyframes pulso { 50% { opacity: .5; } }

/* ---------- Utilitários ---------- */
.flex { display: flex; gap: var(--esp-3); align-items: center; flex-wrap: wrap; }
.entre { justify-content: space-between; }
.suave { color: var(--cor-texto-suave); }
.sutil { color: var(--cor-texto-sutil); font-size: var(--texto-xs); }
.sm { font-size: var(--texto-sm); }
.mt { margin-top: var(--esp-4); }
.mb { margin-bottom: var(--esp-4); }
.positivo { color: var(--cor-positivo); }
.erro { color: var(--cor-erro); }
.centro { text-align: center; }
.sep { border: none; border-top: 1px solid var(--cor-borda); margin: var(--esp-4) 0; }
.grid-2 { display: grid; gap: var(--esp-4); }
@media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.estreito { max-width: 420px; margin: var(--esp-8) auto; }
.medio { max-width: 720px; margin: 0 auto; }
.oculto { display: none !important; }