/* ==========================================================================
   ROADLINE — Tipografia
   Fonte da verdade: .claude/roadline-identidade-visual.md (Bloco 2)
   ⚠️ Escala cobre só h1-h3, .label, .meta e .slogan (o que o documento define
   até agora). h4-h6 e tamanhos de UI (input/botão/tabela) ficam pendentes —
   ver Bloco 2.4 do documento antes de inventar valores aqui.
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-dark);
  background-color: var(--color-light);
}

h1 {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.1;
}

h2 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(22px, 4vw, 36px);
  line-height: 1.2;
}

h3 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(18px, 3vw, 26px);
  line-height: 1.25;
}

/* Título de produto: Exo 2 800, mixed case — nunca uppercase (Bloco 2.5) */
.product-title {
  font-family: var(--font-title);
  font-weight: 800;
  text-transform: none;
}

/* Label de categoria/seção (Bloco 2.5) */
.label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.meta {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  color: var(--color-gray-mid);
}

/* Slogan institucional (Bloco 2.6) — "melhor" sempre em 800, resto em 400 */
.slogan {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(18px, 3vw, 28px);
}

.slogan strong {
  font-weight: 800;
}