/* Escala de tipos — medida dos canvases (app v5 e Landing v2).
   Título: peso 500, tracking de -.025em a -.04em. Quanto maior, mais apertado.
   Número: peso 700. Etiqueta: peso 700, 10,5–11,5px, tracking +.1 a +.16em. */
:root {
  --texto-2xs: 10.5px;
  --texto-xs: 11.5px;
  --texto-sm: 12.5px;
  --texto-base: 14.5px;
  --texto-md: 16.5px;
  --texto-lg: 19px;
  --texto-xl: 22px;
  --texto-2xl: 27px;
  --texto-3xl: 32px;
  --texto-4xl: 43px;
  --texto-5xl: 58px;

  --altura-rente: 1; /* @kind other */
  /* 1.06 e 1.14, e não os 1.02/1.10 do canvas: o canvas só chega no tamanho
     máximo em tela larga, e a 58px com acento agudo o 1.02 colide. */
  --altura-heroi: 1.06; /* @kind other */
  --altura-curta: 1.14; /* @kind other */
  --altura-media: 1.24; /* @kind other */
  --altura-normal: 1.45; /* @kind other */
  --altura-solta: 1.55; /* @kind other */
  --altura-leitura: 1.6; /* @kind other */

  --peso-normal: 400; /* @kind other */
  --peso-medio: 500; /* @kind other */
  --peso-semi: 600; /* @kind other */
  --peso-forte: 700; /* @kind other */

  /* Tracking: título aperta, etiqueta abre. */
  --tracking-heroi: -0.04em; /* @kind other */
  --tracking-titulo: -0.034em; /* @kind other */
  --tracking-medio: -0.028em; /* @kind other */
  --tracking-curto: -0.024em; /* @kind other */
  --tracking-numero: -0.02em; /* @kind other */
  --tracking-zero: 0em; /* @kind other */
  --tracking-etiqueta: 0.15em; /* @kind other */
  --tracking-rotulo: 0.1em; /* @kind other */

  /* Papéis compostos.
     Os títulos grandes são FLUIDOS, como no canvas — o tamanho fixo só vale
     como teto. Sem o clamp, a headline estoura em tela estreita e colide em
     tela larga. */
  --tipo-heroi: var(--peso-medio) clamp(34px, 5.2vw, var(--texto-5xl)) / var(--altura-heroi) var(--font-display);
  --tipo-display: var(--peso-medio) clamp(26px, 3.7vw, var(--texto-4xl)) / var(--altura-curta) var(--font-display);
  /* CTA final da landing: um degrau acima do display. */
  --tipo-cta: var(--peso-medio) clamp(28px, 4.1vw, 48px) / 1.1 var(--font-display);
  /* Frase de fecho de seção — o "A tecnologia deveria reduzir trabalho". */
  --tipo-frase: var(--peso-medio) clamp(18px, 2vw, 24px) / 1.42 var(--font-sans);
  --tipo-h1: var(--peso-medio) var(--texto-3xl) / var(--altura-curta) var(--font-display);
  --tipo-h2: var(--peso-medio) var(--texto-2xl) / var(--altura-media) var(--font-display);
  --tipo-h3: var(--peso-medio) var(--texto-xl) / var(--altura-media) var(--font-display);
  --tipo-h4: var(--peso-medio) var(--texto-md) / var(--altura-media) var(--font-display);
  --tipo-abertura: var(--peso-normal) clamp(16.5px, 1.5vw, var(--texto-lg)) / 1.52 var(--font-sans);
  --tipo-corpo: var(--peso-normal) var(--texto-base) / var(--altura-solta) var(--font-sans);
  --tipo-corpo-sm: var(--peso-normal) var(--texto-sm) / var(--altura-normal) var(--font-sans);
  --tipo-rotulo: var(--peso-medio) var(--texto-sm) / var(--altura-media) var(--font-sans);
  --tipo-botao: var(--peso-forte) 15.5px / 1 var(--font-display);
  --tipo-botao-2: var(--peso-medio) var(--texto-base) / 1 var(--font-display);
  /* Etiqueta de seção: 700, caixa alta, tracking largo. */
  --tipo-etiqueta: var(--peso-forte) var(--texto-xs) / var(--altura-media) var(--font-display);
  /* Rótulo de campo: 400, caixa alta, 10,5px. */
  --tipo-campo: var(--peso-normal) var(--texto-2xs) / var(--altura-media) var(--font-display);
  --tipo-numero: var(--peso-forte) var(--texto-xl) / var(--altura-rente) var(--font-display);
  --tipo-numero-grande: var(--peso-forte) 40px / 0.9 var(--font-display);
  --tipo-mono: var(--peso-normal) var(--texto-xs) / var(--altura-normal) var(--font-mono);
}