/* GERADO por ferramentas/tokens.mjs a partir do DESIGN.md. Não edite à mão: rode `npm run tokens`. */
@import url("./fontes.css");

:root {
  --grafite: #161A1B;
  --caqui: #C3BEB1;
  --nevoa: #ECEBE9;
  --corpo: #E3DFD4;
  --tela: #212322;
  --pedra: #B4AE9C;
  --argila: #7C786B;
  --chumbo: #4A4C49;
  --laranja: #FF6B35;
  --coral: #F67B62;
  --coral-pressionado: #E46E57;
  --queimado: #8F3A18;
  --azul: #0044EE;
  --amarelo: #E9D600;
  --verde: #3BEF7E;
  --azul-anel: #0080F8;
  --lilas: #DFBADC;
  --branco: #FFFFFF;
  --tipo-display-familia: Geist Pixel, Geist Mono, ui-monospace, monospace;
  --tipo-display-tamanho: 136px;
  --tipo-display-peso: 400;
  --tipo-display-altura: 1;
  --tipo-display-espacamento: -0.01em;
  --tipo-headline-familia: Geist Pixel, Geist Mono, ui-monospace, monospace;
  --tipo-headline-tamanho: 96px;
  --tipo-headline-peso: 400;
  --tipo-headline-altura: 1.05;
  --tipo-title-familia: Geist Pixel, Geist Mono, ui-monospace, monospace;
  --tipo-title-tamanho: 56px;
  --tipo-title-peso: 400;
  --tipo-title-altura: 1.1;
  --tipo-body-familia: Geist Mono, ui-monospace, Menlo, monospace;
  --tipo-body-tamanho: 30px;
  --tipo-body-peso: 400;
  --tipo-body-altura: 1.45;
  --tipo-label-familia: Geist Mono, ui-monospace, Menlo, monospace;
  --tipo-label-tamanho: 24px;
  --tipo-label-peso: 500;
  --tipo-label-altura: 1.3;
  --tipo-label-espacamento: 0.06em;
  --raio-tarja: 6px;
  --raio-cartao: 24px;
  --raio-tela: 32px;
  --raio-avatar: 999px;
  --raio-reto: 0px;
  --espaco-s-1: 8px;
  --espaco-s-2: 16px;
  --espaco-s-3: 24px;
  --espaco-s-4: 32px;
  --espaco-s-5: 48px;
  --espaco-s-6: 72px;
  --espaco-s-7: 128px;
}

/* Tipografia: uma classe por estilo do DESIGN.md */
.tipo-display { font-family: var(--tipo-display-familia); font-size: var(--tipo-display-tamanho); font-weight: var(--tipo-display-peso); line-height: var(--tipo-display-altura); letter-spacing: var(--tipo-display-espacamento); }
.tipo-headline { font-family: var(--tipo-headline-familia); font-size: var(--tipo-headline-tamanho); font-weight: var(--tipo-headline-peso); line-height: var(--tipo-headline-altura); }
.tipo-title { font-family: var(--tipo-title-familia); font-size: var(--tipo-title-tamanho); font-weight: var(--tipo-title-peso); line-height: var(--tipo-title-altura); }
.tipo-body { font-family: var(--tipo-body-familia); font-size: var(--tipo-body-tamanho); font-weight: var(--tipo-body-peso); line-height: var(--tipo-body-altura); }
.tipo-label { font-family: var(--tipo-label-familia); font-size: var(--tipo-label-tamanho); font-weight: var(--tipo-label-peso); line-height: var(--tipo-label-altura); letter-spacing: var(--tipo-label-espacamento); }

/* Componentes: uma classe por componente do DESIGN.md (nome-hover vira :hover) */
.button-primary {
  box-sizing: border-box;
  background: var(--grafite);
  color: var(--nevoa);
  font-family: var(--tipo-label-familia);
  font-size: var(--tipo-label-tamanho);
  font-weight: var(--tipo-label-peso);
  line-height: var(--tipo-label-altura);
  letter-spacing: var(--tipo-label-espacamento);
  border-radius: var(--raio-tarja);
  padding: 0 28px;
  height: 56px;
}
.button-secondary {
  box-sizing: border-box;
  background: transparent;
  color: var(--grafite);
  border-color: var(--grafite);
  border: 1px solid;
  font-family: var(--tipo-label-familia);
  font-size: var(--tipo-label-tamanho);
  font-weight: var(--tipo-label-peso);
  line-height: var(--tipo-label-altura);
  letter-spacing: var(--tipo-label-espacamento);
  border-radius: var(--raio-tarja);
  padding: 0 28px;
  height: 56px;
}
.card {
  box-sizing: border-box;
  background: var(--corpo);
  color: var(--grafite);
  border-radius: var(--raio-cartao);
  padding: 32px;
}
.card-escuro {
  box-sizing: border-box;
  background: var(--tela);
  color: var(--nevoa);
  border-radius: var(--raio-cartao);
  padding: 32px;
}
.chip {
  box-sizing: border-box;
  background: var(--tela);
  color: var(--laranja);
  font-family: var(--tipo-label-familia);
  font-size: var(--tipo-label-tamanho);
  font-weight: var(--tipo-label-peso);
  line-height: var(--tipo-label-altura);
  letter-spacing: var(--tipo-label-espacamento);
  border-radius: var(--raio-reto);
  padding: 0 16px;
  height: 40px;
}
.tarja-destaque {
  box-sizing: border-box;
  background: var(--grafite);
  color: var(--nevoa);
  border-radius: var(--raio-tarja);
  padding: 0 14px;
}
.input {
  box-sizing: border-box;
  background: var(--tela);
  color: var(--nevoa);
  font-family: var(--tipo-body-familia);
  font-size: var(--tipo-body-tamanho);
  font-weight: var(--tipo-body-peso);
  line-height: var(--tipo-body-altura);
  border-radius: var(--raio-reto);
  padding: 0 20px;
  height: 56px;
}
.quote {
  box-sizing: border-box;
  color: var(--grafite);
  font-family: var(--tipo-title-familia);
  font-size: var(--tipo-title-tamanho);
  font-weight: var(--tipo-title-peso);
  line-height: var(--tipo-title-altura);
}
.avatar {
  box-sizing: border-box;
  border-radius: var(--raio-avatar);
  width: 56px;
  height: 56px;
}