/* tokens: paleta, grade, ritmo e movimento. Mudanca global mora aqui */
:root {
  /* ---------- marca, conforme o Guia de Marca EloPar, outubro 2015 ----------
     Paleta principal: cinza medio, vermelho e amarelo. O branco deve sempre
     estar presente. Paleta secundaria (verde e cinza escuro) e de uso PONTUAL,
     e o guia exige que a principal seja predominante. */
  --cinza-medio: #383b3f;   /* PANTONE 432 C, principal, dominante */
  --amarelo: #ffd300;       /* PANTONE 7548 C, principal */
  --vermelho: #cc092f;      /* PANTONE 186 C, principal */
  --cinza-escuro: #252a2e;  /* PANTONE 426 C, secundaria */
  /* o verde da paleta secundaria saiu de circulacao por decisao de projeto:
     o guia pede predominancia da paleta principal e o site inteiro estava
     construido sobre ele. */

  /* Acento por contexto. Vermelho sobre claro, amarelo sobre escuro:
     vermelho sobre o cinza escuro da 1,85:1 de contraste, ilegivel, e
     amarelo da 10,7:1. As secoes escuras redefinem --teal no base.css.
     O nome --teal ficou por heranca, mas hoje significa "cor de acento". */
  --teal: var(--vermelho);
  --teal-fundo: #a10725;
  --teal-claro: #ff9db1;
  --dark: var(--cinza-escuro);
  --dark-2: var(--cinza-medio);
  --dark-3: #41454a;
  --paper: #f3f4f5;
  --ink: var(--cinza-medio);
  --muted: #6b7075;
  --line: #dcdee0;
  --dark-line: #4a4f54;
  --yellow: var(--amarelo);
  --red: var(--vermelho);

  /* ---------- grade ----------
     Tudo se alinha a estas 12 colunas. Sangria e excecao, nao regra. */
  --largura: 1440px;
  --gutter: clamp(20px, 4.2vw, 72px);
  --gap: clamp(14px, 1.5vw, 28px);
  --colunas: 12;

  /* ---------- ritmo ---------- */
  --pad-secao: clamp(96px, 10vw, 168px);
  --h-cabecalho: 96px;
  --h-cabecalho-solido: 68px;

  /* ---------- tipografia ----------
     Todo tamanho passa por --escala-texto, que os botoes A- A A+ mudam. */
  --escala-texto: 1;
  --display: 'Nunito Sans', Arial, Helvetica, sans-serif;  /* no lugar de Museo 900 */
  --serif: var(--display);  /* apelido antigo, mantido para os blocos */
  --sans: 'Nunito Sans', Arial, Helvetica, sans-serif;  /* no lugar de Museo Sans 300 */
  --t-display: calc(clamp(64px, 8.2vw, 148px) * var(--escala-texto));
  --t-secao: calc(clamp(44px, 5vw, 82px) * var(--escala-texto));
  --t-titulo: calc(clamp(26px, 2.4vw, 36px) * var(--escala-texto));
  --t-corpo: calc(clamp(15px, 1.15vw, 18px) * var(--escala-texto));
  --t-apoio: calc(14px * var(--escala-texto));
  --t-mini: calc(11px * var(--escala-texto));

  /* ---------- movimento ---------- */
  --mola: cubic-bezier(.16, 1, .3, 1);
  --suave: cubic-bezier(.4, 0, .2, 1);
}