/* O acento: um verde discreto, que combina com as mensagens dos celulares e dá destaque sem pesar.
   A base continua preta, branca e cinza. Para trocar o tom, mude só as três cores abaixo. */
:root {
  --acento: #127a52;          /* verde-escuro: botão principal, avatar, enviar, passos feitos (5,3:1 com o branco) */
  --acento-claro: #dcf2e4;    /* verde-claro: as mensagens enviadas nos celulares */
  --acento-no-preto: #9fe0bb; /* verde claro sobre o preto: o fato aceso na prova */
  --acento-forte: #0d6143;     /* o verde do botão com o mouse em cima */
  --accent: var(--acento);
  --accent-ink: #ffffff;
}

/* o botão principal: verde nas seções brancas e nas pretas */
.topo[data-sobre="preto"] .btn,
.topo.menu-aberto .btn,
.btn--claro { background: var(--acento); color: #ffffff; }
.btn:hover,
.topo[data-sobre="preto"] .btn:hover,
.topo.menu-aberto .btn:hover,
.btn--claro:hover { background: var(--acento-forte); }

/* os convites discretos: verde no papel, branco no preto */
.link-seta { color: var(--acento); }
.link-seta--claro { color: var(--field-ink); }

/* a prova: o fato que acende */
.prova-frase .fato.aceso,
.prova-frase.todos .fato { color: var(--acento-no-preto); }

/* os celulares: a mensagem enviada em verde-claro, o avatar e o botão de enviar em verde-escuro */
.fone-msg--enviada { background: var(--acento-claro); color: #0a0a0a; }
.fone-msg--enviada .fone-opcoes li { background: #c6e7d3; color: #0a0a0a; }
.fone-avatar,
.fone-entrada b { background: var(--acento); color: #ffffff; }

/* os passos que o agente já fez */
[data-demo="agenda"] .ag-step.is-on::before { background: var(--acento); }
[data-demo="catalogo"] .cat-passo::before { background: var(--acento); }

/* os destaques: só a palavra que importa, em verde (o número de cada caso e o resultado principal) */
.caso-numeros strong,
.caso-destaque strong { color: var(--acento); }