/*
 * Padrão visual BK Digital / Bankap — tokens extraídos de bnpdigital.com.br em 06/11/2026
 * (HTML e estilos computados da página; logo oficial nesta mesma pasta, public/identidade-visual/).
 * Use SEMPRE estas variáveis nas telas do sistema. Não inventar cores novas.
 */
:root {
  /* Marca — carmesim do logo e do hero do site */
  --bk-carmesim: #d60d37;        /* início do gradiente / destaque */
  --bk-vinho: #a20d37;           /* cor principal de botões e títulos de marca */
  --bk-vinho-escuro: #810a2c;    /* fim do gradiente / hover */
  --bk-rosa-claro: #dabfc8;      /* fundo suave de destaque, chips */
  --bk-gradiente: linear-gradient(110deg, #d60d37 0%, #a20d37 55%, #810a2c 100%);

  /* Neutros — texto e superfícies do site */
  --bk-tinta: #111827;           /* títulos h2/h3 e botão escuro */
  --bk-grafite: #404652;         /* texto corrido, títulos grandes em cinza */
  --bk-cinza: #b8b8ba;           /* bordas de botão secundário, divisores */
  --bk-cinza-claro: #e7e7e9;     /* fundo de seção alternada */
  --bk-fundo: #fafafa;           /* fundo da página */
  --bk-branco: #ffffff;

  /* Estados (para o sistema; o site não define — escolhidos para conviver com o carmesim) */
  --bk-ok: #1f8a5b;
  --bk-alerta: #c98a00;
  --bk-erro: #b42318;            /* distinto do carmesim de marca: erro não pode parecer botão */
  --bk-info: #2f5f9e;

  /* Tipografia — o site usa Open Sans em tudo (h1 64px/500, h2 56px/500, h3 32px/500, p 16px/400) */
  --bk-fonte: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bk-peso-titulo: 500;
  --bk-peso-texto: 400;
  --bk-peso-forte: 700;

  /* Forma — botões 8px, cards arredondados, botões secundários em pílula com borda cinza */
  --bk-raio: 8px;
  --bk-raio-card: 16px;
  --bk-raio-pilula: 999px;
  --bk-sombra-card: 0 2px 12px rgba(17, 24, 39, 0.08);
}

body {
  font-family: var(--bk-fonte);
  color: var(--bk-grafite);
  background: var(--bk-fundo);
}
.bk-btn-primario { background: var(--bk-vinho); color: #fff; border: 0; border-radius: var(--bk-raio); font-weight: 500; padding: 10px 18px; }
.bk-btn-primario:hover { background: var(--bk-vinho-escuro); }
.bk-btn-escuro { background: var(--bk-tinta); color: #fff; border: 0; border-radius: var(--bk-raio); font-weight: 500; padding: 10px 18px; }
.bk-btn-secundario { background: transparent; color: var(--bk-grafite); border: 1px solid var(--bk-cinza); border-radius: var(--bk-raio-pilula); padding: 8px 18px; }
.bk-hero { background: var(--bk-gradiente); color: #fafafa; }
.bk-card { background: #fff; border-radius: var(--bk-raio-card); box-shadow: var(--bk-sombra-card); }