/* =========================================================================
   UTILITÁRIAS — o punhado de classes soltas que o HTML usa direto.
   =========================================================================
   Isto substitui o Tailwind, que vinha por CDN (<script src="cdn.tailwind
   css.com">). Três motivos para trazê-lo para casa:

   1. Era um SCRIPT gerando CSS no navegador, no caminho crítico: a tela
      aparecia sem estilo e se ajeitava depois, e a CSP precisava aceitar
      'unsafe-inline' em style-src por causa dele.
   2. Dependência externa: CDN fora do ar (ou bloqueada numa rede de casa de
      show) = app sem layout, na hora da passagem de som.
   3. Dele o app usava 37 classes. Trinta e sete.

   O que existe aqui é essa lista fechada, com os mesmos nomes de sempre (o
   HTML não muda) e os valores vindos dos tokens. Classe nova de utilitária
   não se inventa: se algo precisa de espaçamento próprio, é componente.
   ========================================================================= */

/* ── Arranjo ───────────────────────────────────────────────────────────── */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.hidden { display: none; }
.min-h-screen { min-height: 100vh; }

/* ── Espaço entre itens ────────────────────────────────────────────────── */
.gap-2 { gap: var(--e2); }
.gap-3 { gap: var(--e3); }
.gap-4 { gap: var(--e4); }
.gap-6 { gap: var(--e5); }

/* ── Margem ────────────────────────────────────────────────────────────────
   Os números são os do Tailwind (1 = 0,25rem … 6 = 1,5rem), mas caem nos
   degraus da escala. O 5 e o 6 chegam no mesmo lugar: 1,25rem não é degrau
   desta escala, e as duas telas que usavam mb-5 não perdem nada com isso. */
.mb-1 { margin-bottom: var(--e1); }
.mb-2 { margin-bottom: var(--e2); }
.mb-3 { margin-bottom: var(--e3); }
.mb-4 { margin-bottom: var(--e4); }
.mb-5 { margin-bottom: var(--e5); }
.mb-6 { margin-bottom: var(--e5); }
.mt-1 { margin-top: var(--e1); }
.mt-2 { margin-top: var(--e2); }
.mt-3 { margin-top: var(--e3); }
.mt-4 { margin-top: var(--e4); }
.mt-5 { margin-top: var(--e5); }
.mt-6 { margin-top: var(--e5); }

/* ── Alinhamento de texto ──────────────────────────────────────────────── */
.text-right { text-align: right; }
.text-center { text-align: center; }

/* ── Cor de apoio ──────────────────────────────────────────────────────────
   Só o que o HTML já usava, agora apontando para os tokens de feedback. São
   os pares fundo+texto das etiquetas de estado. */
.bg-gray-100 { background-color: var(--cor-superficie-2); }
.text-gray-700 { color: var(--cor-texto-principal); }
.text-gray-600 { color: var(--cor-texto-suave); }
.bg-green-100 { background-color: var(--cor-sucesso-fundo); }
.text-green-800 { color: var(--cor-sucesso-texto); }
.bg-yellow-100 { background-color: var(--cor-aviso-fundo); }
.text-yellow-800 { color: var(--cor-aviso-texto); }
.bg-red-100 { background-color: var(--cor-erro-fundo); }
.text-red-800 { color: var(--cor-erro-texto); }