/* ==========================================================================
   Roteiro FLH - paleta nova (18/09) aplicada ao questionário
   Depende de tokens.css, styles.css, questionario.css e flh.css — carrega
   por último, só em roteiro.html. tabela.html e o painel administrativo
   não referenciam este arquivo, então continuam no tema original.

   O questionário é uma tela só por vez, sem seções claras/escuras
   alternando como a capa (ver landing.css) — por isso aqui é só
   recolorir a MESMA estrutura de contraste que já existia (superfícies
   do mais escuro ao mais claro, dourado como acento) para a família
   verde-floresta/terracota/mostarda aprovada pela Karen, sem mudar
   nenhuma lógica clara/escura nova.
   ========================================================================== */

:root {
  --surface-0: #0c2419;
  --surface-1: #113227;
  --surface-2: #163c2c;
  --surface-3: #1c4735;

  --text-primary: #f6f8f5;
  --text-secondary: #c3d0c7;
  --text-muted: #93a598;
  --text-on-amarelo: #fdf6f4;

  --border: #234a38;
  --border-strong: #356048;
  --border-amarelo: rgba(166, 58, 43, 0.32);

  --amarelo-300: #e2917a;
  --amarelo-400: #cf7a5c;
  --amarelo-500: #a63a2b;
  --amarelo-600: #e5ad35;
  --amarelo-700: #6e2419;

  background: var(--surface-0);
  color: var(--text-primary);
}

/* .header (styles.css) tem um fundo translúcido fixo, pensado pro tom
   quase-preto original — compartilhado com tabela.html, termos.html
   etc., que continuam nele. Este arquivo só carrega em roteiro.html,
   então sobrescrever aqui não vaza para as outras páginas. */
.header {
  background: rgba(17, 50, 39, 0.9);
}

/* O preço do checkout (questionario.css) usa --amarelo-500, que aqui é
   terracota — pedido da Karen pra destacar mais, em mostarda. */
.gate__preco {
  color: #e5ad35;
}

/* Campo em foco (questionario.css) usa --amarelo-500 (terracota) na
   borda, e o botão "Usar voucher" (.btn--ghost, styles.css) no hover
   usa --amarelo-600 (mostarda) na borda mas --amarelo-400 (terracota)
   no texto — duas cores diferentes convivendo no mesmo estado "isto
   está selecionado". Sincroniza tudo em mostarda. */
.campo__entrada:focus {
  border-color: #e5ad35;
}

.btn--ghost:hover {
  color: #e5ad35;
}

/* Link "critérios, termos e condições" (tela de resultado) — o padrão
   de link (styles.css) usa --amarelo-500, terracota aqui; pedido da
   Karen pra destacar mais, em mostarda. */
.flh-link-amarelo {
  color: #e5ad35;
}

.flh-link-amarelo:hover {
  color: #f0c05a;
}