/* =====================================================================
   CORES DO SITE — para mudar o visual inteiro, edite só as 3 linhas abaixo.
   Todos os outros tons (bordas, textos secundários, fundos, destaques e as
   logos dos clientes) são calculados automaticamente a partir delas.
   ===================================================================== */
:root{
  --cor-marca: #00AFEF;   /* destaque: botões, números, seleção, ícones */
  --cor-escura: #0B1E30;  /* seções escuras, textos e cabeçalho da demonstração */
  --cor-clara: #EFF4F8;   /* fundo das páginas */

  /* Cor das logos dos clientes (faixa escura "Presença nacional"). */
  --cor-logos-clientes: color-mix(in oklab, var(--cor-clara), white 40%);

  /* ---- tons derivados: não precisa editar ----
     tom-NN  = NN% da cor escura misturada à cor clara (00 = clara, 100 = escura)
     tom-claro-NN / tom-escuro-NN = cor clara com branco / cor escura com preto
     marca-claro-NN / marca-escuro-NN = cor da marca com branco / com a cor escura */
  --tom-00: var(--cor-clara);
  --tom-03: color-mix(in oklab, var(--cor-escura) 3%, var(--cor-clara));
  --tom-06: color-mix(in oklab, var(--cor-escura) 6%, var(--cor-clara));
  --tom-10: color-mix(in oklab, var(--cor-escura) 10%, var(--cor-clara));
  --tom-15: color-mix(in oklab, var(--cor-escura) 15%, var(--cor-clara));
  --tom-20: color-mix(in oklab, var(--cor-escura) 20%, var(--cor-clara));
  --tom-28: color-mix(in oklab, var(--cor-escura) 28%, var(--cor-clara));
  --tom-36: color-mix(in oklab, var(--cor-escura) 36%, var(--cor-clara));
  --tom-52: color-mix(in oklab, var(--cor-escura) 52%, var(--cor-clara));
  --tom-62: color-mix(in oklab, var(--cor-escura) 62%, var(--cor-clara));
  --tom-70: color-mix(in oklab, var(--cor-escura) 70%, var(--cor-clara));
  --tom-78: color-mix(in oklab, var(--cor-escura) 78%, var(--cor-clara));
  --tom-85: color-mix(in oklab, var(--cor-escura) 85%, var(--cor-clara));
  --tom-92: color-mix(in oklab, var(--cor-escura) 92%, var(--cor-clara));
  --tom-100: var(--cor-escura);
  --marca: var(--cor-marca);
  --marca-claro-15: color-mix(in oklab, var(--cor-marca), white 15%);
  --marca-claro-30: color-mix(in oklab, var(--cor-marca), white 30%);
  --marca-escuro-30: color-mix(in oklab, var(--cor-marca), var(--cor-escura) 30%);
  --marca-escuro-45: color-mix(in oklab, var(--cor-marca), var(--cor-escura) 45%);
  --tom-claro-30: color-mix(in oklab, var(--cor-clara), white 30%);
  --tom-claro-45: color-mix(in oklab, var(--cor-clara), white 45%);
  --tom-escuro-15: color-mix(in oklab, var(--cor-escura), black 15%);
  --tom-escuro-30: color-mix(in oklab, var(--cor-escura), black 30%);
}
/* Obs.: a cor da barra do navegador no celular fica na tag <meta name="theme-color"> de cada página
   (HTML não lê variáveis CSS). Hoje ela usa a --cor-clara. As logos do Timelapse de Obras são imagens
   em assets/marca/. */