Hierarquia tipografica para interfaces responsivas

Defina uma hierarquia tipografica completa para [NOME DO PRODUTO], um [TIPO DE PRODUTO] que precisa funcionar de [BREAKPOINT MINIMO]px a [BREAKPOINT MAXIMO]px.

Fontes disponiveis: [FONTE PRINCIPAL] para texto e [FONTE DISPLAY] para titulos (ou sugira combinacoes).

**1) Escala Tipografica:**
- Display: XL, LG, MD (para hero sections e paginas de marketing)
- Heading: H1, H2, H3, H4, H5, H6 (para hierarquia de conteudo)
- Body: LG, MD, SM (para texto corrido)
- Label: LG, MD, SM (para UI elements)
- Caption e Overline

Para cada nivel, defina:
- Font-size (mobile e desktop, em rem)
- Line-height (relativo)
- Letter-spacing
- Font-weight
- Maximo de caracteres por linha (para legibilidade)

**2) Fluid Typography:**
- Formula clamp() para cada nivel
- Breakpoints de transicao
- Escala modular utilizada (ex: 1.250 Major Third)

**3) Espacamento Vertical:**
- Margin-bottom padrao apos cada heading
- Espacamento entre paragrafos
- Ritmo vertical baseado em baseline grid de [VALOR]px

**4) Responsividade:**
- Tabela comparativa: mobile (375px) / tablet (768px) / desktop (1440px)
- Regras de truncamento (ellipsis, line-clamp)
- Comportamento em containers estreitos

**5) Implementacao:**
- CSS custom properties
- Tailwind config (se aplicavel)
- Tokens para Figma/[FERRAMENTA DE DESIGN]

Considere que o publico brasileiro acessa majoritariamente por smartphones Android com telas de 5.5" a 6.7".