/* ==========================================================================
   MARCA — Traço & Fluxo · Kit Oficial V1
   --------------------------------------------------------------------------
   Este é o ÚNICO arquivo de CSS que muda de um cliente para outro.
   Valores copiados de marca/kit-v1/05-site/brand-tokens.css (não alterar
   sem aprovação da direção de marca).

   1. Fontes (hospedadas no próprio site, licença SIL OFL 1.1)
   2. Tokens oficiais (--tf-*)
   3. Mapeamento para as variáveis genéricas usadas em base.css (--cor-*, ...)
   ========================================================================== */

/* 1. Fontes ---------------------------------------------------------------- */
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fontes/syne-600.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fontes/dm-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fontes/dm-sans-500.woff2") format("woff2");
}

:root {
  /* 2. Tokens oficiais — Paleta Equilibrada ------------------------------- */
  --tf-azul-noite: #0F1B3D;      /* principal: textos, fundos escuros, botões (~35%) */
  --tf-off-white:  #F7F6F2;      /* fundo principal (~50%) */
  --tf-nevoa:      #ECEAF4;      /* fundos pontuais e cartões (~8%) */
  --tf-coral:      #FF6B4A;      /* acento — NUNCA texto sobre fundo claro (~7%) */

  --tf-texto-2:      #3B4262;
  --tf-texto-3:      #4A5272;
  --tf-borda:        #E3E1DA;
  --tf-coral-escuro: #C7401F;    /* texto colorido / hover em fundo claro */
  --tf-azul-hover:   #1B2A57;
  --tf-texto-no-escuro: #D5D8E6;

  --tf-fonte-titulo: "Syne", system-ui, sans-serif;
  --tf-fonte-texto:  "DM Sans", system-ui, sans-serif;

  /* 3. Mapeamento genérico (consumido por base.css) ----------------------- */
  --cor-fundo:            var(--tf-off-white);
  --cor-superficie:       var(--tf-nevoa);
  --cor-texto:            var(--tf-azul-noite);
  --cor-texto-2:          var(--tf-texto-2);
  --cor-texto-3:          var(--tf-texto-3);
  --cor-borda:            var(--tf-borda);
  --cor-linha-forte:      var(--tf-azul-noite);
  --cor-primaria:         var(--tf-azul-noite);
  --cor-primaria-hover:   var(--tf-azul-hover);
  --cor-sobre-primaria:   var(--tf-off-white);
  --cor-acento:           var(--tf-coral);        /* linhas, traços, detalhes */
  --cor-link:             var(--tf-coral-escuro); /* texto colorido em fundo claro */
  --cor-foco:             var(--tf-coral-escuro);

  --cor-escuro-fundo:     var(--tf-azul-noite);
  --cor-escuro-texto:     var(--tf-off-white);
  --cor-escuro-texto-2:   var(--tf-texto-no-escuro);
  --cor-escuro-borda:     rgba(213, 216, 230, 0.22);
  --cor-escuro-foco:      var(--tf-coral);

  --fonte-titulo:   var(--tf-fonte-titulo);
  --fonte-texto:    var(--tf-fonte-texto);
  --peso-titulo:    600;
  --tracking-titulo: -0.03em;
  --tracking-rotulo: 0.32em;

  --raio-botao: 999px;  /* botões em pílula */
  --raio-bloco: 0;      /* blocos e imagens com cantos retos */
  --conteudo-max: 1160px;
}