/* Tokens: paleta tirada do material do cliente (logo e folheto), refinada.
   Azul do G, laranja da barra, céu das garagens iluminadas, cinza de concreto. */

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* azuis */
  --tinta: #0e1a2b;
  --grafite: #5a6577;
  --grafite-claro: #8a93a3;
  --concreto-lavado: #f2f5f8;
  --marinho: #14305c;
  --marinho-2: #1c4178;
  --azul: #1f63c9;
  --azul-vivo: #2e9ad6;
  --ceu: #7fb6ea;
  --ceu-50: rgb(127 182 234 / 0.5);
  --nevoa: #eaf2fb;
  --gelo: #f6f9fd;

  /* neutros de concreto */
  --concreto: #e4e9ef;
  --aco: #8a97a8;
  --aco-escuro: #4b586a;
  --linha: rgb(20 48 92 / 0.12);
  --linha-forte: rgb(20 48 92 / 0.22);

  /* acento único */
  --laranja: #f07f1f;
  --laranja-claro: #f9a23c;
  --laranja-texto: #c4560b;
  --amarelo-faixa: #f2be30;

  /* superfícies */
  --vidro: rgb(255 255 255 / 0.62);
  --vidro-borda: rgb(255 255 255 / 0.85);
  --cena-tinta: #06101f;
  --cena-meio: #3a4656;
  --branco: #fff;
  --texto-inverso: #eef5fd;
  --texto-inverso-suave: #c9d8ea;
  --traco-claro: #d6e7f8;

  /* fundo da página */
  --fundo-a: #fbfcfe;
  --fundo-b: #edf3fa;
  --fundo-c: #f5f6f8;

  /* tipografia */
  --fonte-titulo: "Archivo", "Arial Black", system-ui, sans-serif;
  --fonte-texto: "Poppins", system-ui, sans-serif;

  /* raio: uma escala, levemente arredondada */
  --raio-p: 8px;
  --raio: 14px;
  --raio-g: 22px;

  --sombra: 0 1px 0 rgb(255 255 255 / 0.9) inset, 0 18px 40px -24px rgb(11 27 51 / 0.35);
  --margem: clamp(16px, 4vw, 56px);
  --largura: 1240px;
  --curva: cubic-bezier(0.25, 0.1, 0.3, 1);
  --curva-padrao: cubic-bezier(0.4, 0, 0.6, 1);
  --fio: inset 0 0 0.5px 0 rgb(14 26 43 / 0.18);
  --sombra-baixa: 0 2px 6px rgb(14 26 43 / 0.04), 0 18px 40px -18px rgb(14 26 43 / 0.16);
}