/* Criadores por aí · tokens. Gerado por gerar-tokens.py a partir de tokens.json.
   Não editar à mão: mexa no JSON e rode o script. */

:root {
  /* cor */
  --cor-terracota: #7f3f2b;
  --cor-areia: #f6b77a;
  --cor-verde: #4e7b6e;
  --cor-nude: #fde4d5;
  --cor-preto: #1d1d1b;
  --cor-branco: #ffffff;

  /* papel de cada cor */
  --canvas: var(--cor-nude);
  --bloco: var(--cor-terracota);
  --acento: var(--cor-areia);
  --acao: var(--cor-verde);
  --tinta: var(--cor-terracota);
  --tinta-clara: var(--cor-nude);
  --tinta-acao: var(--cor-branco);

  /* letra */
  --fonte-display: "Bebas Neue", sans-serif;
  --tracking-display: 0.012em;
  --fonte-mono: "Space Mono", monospace;
  --tracking-mono: 0.2em;
  --fonte-texto: "DM Sans", sans-serif;
  --tracking-texto: 0;

  /* escala de site */
  --display: 88px;
  --display-lh: 0.86;
  --h1: 64px;
  --h1-lh: 0.88;
  --h2: 40px;
  --h2-lh: 0.92;
  --h3: 26px;
  --h3-lh: 1.1;
  --corpo: 18px;
  --corpo-lh: 1.55;
  --apoio: 15px;
  --apoio-lh: 1.5;
  --micro: 13px;
  --micro-lh: 1.45;
  --rotulo: 12px;
  --rotulo-lh: 1.3;

  /* espaço */
  --e4: 4px;
  --e8: 8px;
  --e16: 16px;
  --e24: 24px;
  --e32: 32px;
  --e48: 48px;
  --e64: 64px;
  --e96: 96px;
  --e128: 128px;

  /* forma */
  --raio: 0px;
  --borda: 1px;
  --picote: 1px dashed;
  --sombra: none;
}

/* papéis de texto prontos */
.t-display { font-family: var(--fonte-display); font-size: var(--display); line-height: var(--display-lh); letter-spacing: var(--tracking-display); text-transform: uppercase; }
.t-h1 { font-family: var(--fonte-display); font-size: var(--h1); line-height: var(--h1-lh); letter-spacing: var(--tracking-display); text-transform: uppercase; }
.t-h2 { font-family: var(--fonte-display); font-size: var(--h2); line-height: var(--h2-lh); letter-spacing: var(--tracking-display); text-transform: uppercase; }
.t-h3 { font-family: var(--fonte-display); font-size: var(--h3); line-height: var(--h3-lh); letter-spacing: var(--tracking-display); text-transform: uppercase; }
.t-corpo { font-family: var(--fonte-texto); font-size: var(--corpo); line-height: var(--corpo-lh); }
.t-apoio { font-family: var(--fonte-texto); font-size: var(--apoio); line-height: var(--apoio-lh); }
.t-micro { font-family: var(--fonte-texto); font-size: var(--micro); line-height: var(--micro-lh); }
.t-rotulo { font-family: var(--fonte-mono); font-weight: 700; font-size: var(--rotulo); line-height: var(--rotulo-lh); letter-spacing: var(--tracking-mono); text-transform: uppercase; }

/* a palavra em destaque do título: uma por peça */
.k { color: var(--acento); }