/* Base element layer — Roteirizador BR4 (UI-01 / DEC-062).
 * Aplica os tokens aos elementos crus (body, títulos, tabela, links) e às classes
 * utilitárias herdadas das etapas 1–2 (.erro/.ok/.aviso/.pilula/.delta-*), agora
 * sobre a paleta do DESIGN.md. Componentes nomeados ficam em components.css. */

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

body {
  font-family: var(--font-poppins);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-ink);
  background: var(--surface-canvas);
  margin: 0;
  padding: var(--spacing-24);
}

main {
  max-width: var(--page-max-width);
  margin: 0 auto;
}

h1, h2, h3 {
  color: var(--color-ink);
  margin: 0 0 var(--spacing-16);
}

h1 {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--font-weight-bold);
}

h2 {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-medium);
}

h3 {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-medium);
}

a {
  color: var(--color-monday-violet);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Tabela padrão densa (o planejador é feito de tabelas). Cabeçalho Slate, zebra
 * sutil, hover Cloud — a variante nomeada .tabela fica em components.css. */
table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--spacing-16) 0;
  font-size: var(--text-body-sm);
}
th, td {
  border-bottom: 1px solid var(--color-mist);
  padding: var(--spacing-8) var(--spacing-16);
  text-align: left;
}
th {
  color: var(--color-slate);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

label {
  display: inline-block;
  margin: var(--spacing-8) var(--spacing-8) var(--spacing-8) 0;
  color: var(--color-slate);
  font-size: var(--text-body-sm);
}

/* --- Utilitárias herdadas, tokenizadas --- */
.erro { color: #b3261e; }
.ok { color: var(--color-forest); }
.aviso { color: #8a5a00; }

/* .pilula: pill genérico neutro (o Status Pill semântico é .pill em components.css). */
.pilula {
  display: inline-block;
  padding: 2px var(--spacing-8);
  border-radius: var(--radius-badges);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  background: var(--color-pebble);
  color: var(--color-ink);
}

.delta-melhor { color: var(--color-forest); }
.delta-pior { color: #b3261e; }