/* ==========================================================================
   Roteiro FLH - tokens de design

   PALETA: VERDE-MUSGO PROFUNDO E DOURADO
     dourado de marca ... #c2a24f   (acento, botões e destaques)
     verde-musgo ........ #1a2a22   (faixas e superfícies de estrutura)
     cinza-verde ........ #b7c2b7   (texto secundário)
     verde quase-preto .. #0d1611   (fundo da página)

   Trocado a partir da referência visual pedida (18/09): fundo verde-
   musgo profundo em vez de grafite neutro, dourado em vez de amarelo —
   mais "assessoria financeira premium", menos "urbano/concreto" da
   paleta anterior. Os tokens continuam com os nomes antigos
   (--amarelo-*, --grafite-*) por ora: uma renomeação completa (mais de
   80 ocorrências) fica pendente como limpeza futura, não bloqueia a
   troca de cor em si.

   DOURADO É ACENTO, VERMELHO É ERRO
   O dourado é a cor de ação. Por isso o alerta continua francamente
   avermelhado: duas coisas diferentes não podem morar em matizes
   vizinhos numa interface que pede decisão. E nenhuma delas comunica
   sozinha — a cor acompanha texto, nunca o substitui.
   ========================================================================== */

:root {
  /* --- marca (dourado) ---------------------------------------------------- */
  --amarelo-300: #e6d6a8;
  --amarelo-400: #d4bc74;
  --amarelo-500: #c2a24f; /* cor de ação, o dourado do símbolo */
  --amarelo-600: #a3873d;
  --amarelo-700: #7a6530;

  /* --- verde-musgo (estrutura: faixas, molduras, gradientes de seção) ----- */
  --grafite-900: #0a120d;
  --grafite-800: #101c15;
  --grafite-700: #1a2a22;
  --grafite-600: #24382e;
  --grafite-400: #4a6355;

  /* --- superficies (camadas tonais, do mais escuro ao mais claro) -------- */
  --surface-0: #0d1611; /* fundo da pagina */
  --surface-1: #101c15; /* secoes alternadas */
  --surface-2: #17251d; /* cartoes */
  --surface-3: #1f3026; /* cartoes em hover, campos */

  /* --- texto ------------------------------------------------------------ */
  --text-primary: #f0eee2;
  --text-secondary: #b7c2b7;
  --text-muted: #8a998c;
  --text-on-amarelo: #16210f;

  /* --- bordas ----------------------------------------------------------- */
  --border: #24382e;
  --border-strong: #3a5245;
  --border-amarelo: rgba(194, 162, 79, 0.32);

  /* --- estados ---------------------------------------------------------- */
  /* Moram aqui, e nao na folha da capa, porque o questionario tambem
     precisa deles: soma que nao fecha e mensagem de erro sao estado, e
     estado e vocabulario do sistema inteiro. */
  --alerta-500: #d8593f;
  --alerta-300: #f0a08a;
  --alerta-fundo: rgba(216, 89, 63, 0.1);
  --alerta-borda: rgba(216, 89, 63, 0.32);

  --ok-500: #7fa87a;
  --ok-300: #b4cfaf;
  --ok-fundo: rgba(127, 168, 122, 0.09);
  --ok-borda: rgba(127, 168, 122, 0.28);

  /* --- tipografia ------------------------------------------------------- */
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --size-display: clamp(2.5rem, 6vw, 4.25rem);
  --size-h2: clamp(1.75rem, 3.4vw, 2.5rem);
  --size-h3: 1.25rem;
  --size-body-lg: 1.125rem;
  --size-body: 1rem;
  --size-small: 0.875rem;
  --size-label: 0.75rem;

  /* --- espacamento (base 8px) ------------------------------------------- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --space-15: 120px;

  --container: 1200px;
  --measure: 68ch; /* largura maxima de leitura confortavel */

  /* --- formas ----------------------------------------------------------- */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --transition: 200ms ease;
}