/* ===========================================
  Neste arquivo você vai encontrar as variaveis do site:
  - Cores
  - Fontes
  - Espaçamentos
  - Definição de tamanhos
  - Bordas
=========================================== */

:root {
  /* CORES DO TEMA */
  --c1: #005eff;  /* Cor principal */
  --c2: #ff9b00;  /* Cor secundária */
  --ct: #ffffff;  /* Cor de contraste */

  --txt: #111111;  /* Cor do texto */
  --ttl: #000000;  /* Cor dos títulos */

  --top-bg: #f4f4f4;  /* Fundo topo de contatos */
  --top-txt: #111111;  /* Texto topo de contatos */

  --head-bg: #ffffff;  /* Fundo cabeçalho */
  --head-txt: #111111;  /* Textos cabeçalho */
  --head-btn: #222222;  /* Botão redes sociais cabeçalho */
  --head-ico: #ffffff;  /* Ícone redes sociais cabeçalho */

  --bt-bg: #000000;  /* Cor de fundo dos botões */
  --bt-tx: #ffffff;  /* Cor do texto dos botões */
  --bt-bg-h: #ff0000;  /* Cor de fundo dos botões no hover */
  --bt-tx-h: #ffffff;  /* Cor do texto dos botões no hover */

  --bar-bg: #eeeeee;  /* Fundo barra título páginas internas */
  --bar-txt: #111111;  /* Texto barra título páginas internas */

  --foot-bg: #000000;  /* Fundo rodapé */
  --foot-txt: #ffffff;  /* Texto rodapé */
  --foot-btn: #222222;  /* Botão redes sociais rodapé */
  --foot-ico: #ffffff;  /* Ícone redes sociais rodapé */

  /* FONTES */
  --fonte-base: "Inter Tight", sans-serif;
  --fonte-titulo: "Inter Tight", sans-serif;
  --peso-light: 300;
  --peso-normal: 400;
  --peso-medio: 600;
  --peso-bold: 700;

  /* FONT-SIZE FLUIDOS */
  --fs-13: clamp(13px, 1vw, 16px);
  --fs-14: clamp(14px, 1vw, 18px);
  --fs-16: clamp(16px, 1vw, 20px);
  --fs-18: clamp(18px, 1vw, 24px);
  --fs-22: clamp(22px, 2vw, 30px);
  --fs-26: clamp(26px, 2vw, 34px);

  /* LINE-HEIGHT COMPATÍVEIS */
  --lh-13: 1.55;
  --lh-14: 1.50;
  --lh-16: 1.55;  /* antes: 1.45 */
  --lh-18: 1.45;  /* antes: 1.40 */
  --lh-22: 1.35;  /* antes: 1.25  -> MUITO baixo */
  --lh-26: 1.30;  /* antes: 1.20 */


  /* ESPAÇEMNTO EXTERNO */
  --esp-0: 0px;
  --esp-5: 5px;
  --esp-10: 10px;
  --esp-15: 15px;
  --esp-20: 20px;
  --esp-25: 25px;
  --esp-30: 30px;
  --esp-40: 40px;
  --esp-60: 60px;
  --esp-80: 80px;
  --esp-100: 100px;
  --esp-120: 120px;

  /* BORDAS */
  --borda-5: 5px;
  --borda-10: 10px;
  --borda-20: 20px;
  --borda-30: 30px;
  --borda-infinita: 9999px;
  --borda-circular: 50%;

  /* DISPLAY PRINCIPAIS */
  --d-block: block;
  --d-inline: inline;
  --d-inline-block: inline-block;

  /* DISPLAY GRID */
  --d-grid: grid;
  --d-inline-grid: inline-grid;

  /* DISPLAY TABLE */
  --d-table: table;
  --d-table-row: table-row;
  --d-table-cell: table-cell;
  --d-inline-table: inline-table;

  /* DISPLAY LISTA */
  --d-list-item: list-item;

  /* DISPLAY FLOW-ROOT */
  --d-flow-root: flow-root;

  /* DISPLAY CONTENTS */
  --d-contents: contents;

  /* DISPLAY NONE */
  --d-none: none;

  /* DISPLAY */
  --d-flex: flex;
  --d-inline-flex: inline-flex;

  /* FLEX-DIRECTION */
  --fd-row: row;
  --fd-row-reverse: row-reverse;
  --fd-column: column;
  --fd-column-reverse: column-reverse;


  /* ALIGN-ITEMS */
  --ai-start: flex-start;
  --ai-end: flex-end;
  --ai-center: center;
  --ai-baseline: baseline;
  --ai-stretch: stretch;

  /* FLEX-WRAP */
  --fw-wrap: wrap;
  --fw-nowrap: nowrap;

  /* JUSTIFY-CONTENT  */
  --jc-start: flex-start;
  --jc-end: flex-end;
  --jc-center: center;
  --jc-between: space-between;
  --jc-around: space-around;
  --jc-evenly: space-evenly;

  /* GAP */
  --gap-5: 5px;
  --gap-8: 8px;
  --gap-10: 10px;
  --gap-15: 15px;
  --gap-20: 20px;
  --gap-30: 30px;

}