/* Tokens de design.
   Valores confirmados via extração do Figma (arquivo "Site Mercanet (Copy)").
   Cada seção reconfirma seus próprios valores ao ser construída; nada aqui é suposição. */
:root {
  --color-orange: #EB4208;
  --color-orange-light: #F15A22;
  --color-red-dark: #BD2019;
  --color-navy: #19202E;
  /* Navy mais claro que --color-navy, usado nos cards/painéis escuros
     sobre fundo claro ou colorido (bento grid de Módulos, card de cada
     segmento, CTA do rodapé) — --color-navy é só pra fundo de seção
     inteira. Confirmado no Figma em 3 lugares (2470:8727, 2470:8977,
     2470:8300), sempre o mesmo #263145. */
  --color-navy-light: #263145;
  --color-navy-blue: #0C3D5E;
  --color-white: #FFFFFF;
  --color-bg: #F9FAFC;
  /* Faixas de fundo mais escuras entre seções (Integrações, IA, Depoimentos).
     Pedido do cliente: #EEF1F6 (o Figma de O Mercanet/Cases usa #E9EDF3 nas
     faixas — trocar aqui unifica tudo). */
  --color-bg-band: #EEF1F6;
  --color-gray-02: #CACBCD;
  --color-gray-03: #939599;
  --color-gray-04: #4C4F55;
  --color-border-blue: rgba(79, 96, 131, 0.2);
  --color-border-light: rgba(202, 203, 205, 0.3);
  --color-header-bg: rgba(255, 255, 255, 0.05);

  --font-base: 'Sora', system-ui, -apple-system, sans-serif;

  /* O Figma usa 1280px de conteúdo real (margem de 320px em um canvas de
     1920px). Com box-sizing:border-box, o padding do .container é descontado
     do max-width, então soma-se aqui 2x o padding para o conteúdo continuar
     com 1280px de fato em telas largas. */
  --container-content-width: 1280px;
  --container-padding: 20px;
  --container-width: calc(var(--container-content-width) + (var(--container-padding) * 2));

  --transition-base: 250ms ease-out;
}