/* tokens.css
   Variáveis globais do sistema de propostas d.mr design.

   Cores da marca extraídas do logo real (assets/img/logo.svg):
   amarelo #F7D000 e vermelho #E31715. O laranja segue provisório,
   por não fazer parte do gradiente do logo.

   Tema único claro em toda a extensão da página. Decisão do projeto.

   Razões de contraste sobre --cor-fundo (#FFFFFF):
     --cor-texto          #2A2A2A  →  13.2 : 1  (AAA)
     --cor-texto-titulo   #1A1A1A  →  16.3 : 1  (AAA)
     --cor-texto-secundario #6B6B6B →  4.93 : 1  (AA)
     --cor-texto-invertido #FFFFFF sobre --marca-vermelho #E31715 → 4.77 : 1 (AA)
     --marca-gradiente: extremo vermelho 4.77 : 1 (AA), extremo amarelo 1.50 : 1 (abaixo de AA, uso restrito a texto decorativo grande)
*/

:root {
  /* Fundo */
  --cor-fundo: #FFFFFF;

  /* Texto */
  --cor-texto: #2A2A2A;
  --cor-texto-titulo: #1A1A1A;
  --cor-texto-secundario: #6B6B6B;
  --cor-texto-invertido: #FFFFFF;

  /* Bordas e separadores */
  --cor-borda: rgba(0, 0, 0, 0.1);

  /* Marca. Laranja provisório, fora do gradiente do logo. */
  --marca-amarelo: #F7D000;
  --marca-laranja: #F26522;
  --marca-vermelho: #E31715;
  --marca-gradiente: linear-gradient(90deg, var(--marca-amarelo), var(--marca-vermelho));

  /* Tipografia */
  --fonte-titulo: 'Sora', system-ui, sans-serif;
  --fonte-texto: 'Sora', system-ui, sans-serif;

  /* Espaçamento */
  --espaco-3xs: 0.25rem;
  --espaco-2xs: clamp(0.25rem, 0.125rem + 0.25vw, 0.5rem);
  --espaco-xs: clamp(0.5rem, 0.25rem + 0.5vw, 1rem);
  --espaco-sm: clamp(0.75rem, 0.5rem + 0.5vw, 1rem);
  --espaco-md: clamp(1rem, 0.75rem + 1vw, 2rem);
  --espaco-lg: clamp(1.5rem, 1rem + 2vw, 3rem);
  --espaco-xl: clamp(2rem, 1.5rem + 2vw, 4rem);

  /* Layout */
  --largura-conteudo: min(92vw, 75rem);
  --ritmo-secao: clamp(4rem, 10vw, 9rem);
  --raio: 1rem;
}