/* ==========================================================================
   Impulso Consultoria — identidade visual

   Fonte da verdade das cores e da tipografia. Alterar uma variável aqui
   reflete na página inteira. A paleta veio do manual da marca em docs/marca/.
   ========================================================================== */

:root {
  /* --- Cores da marca --------------------------------------------------- */
  --cafe-900: #2A1D17;   /* marrom escuro — painel institucional            */
  --cafe-700: #7E4B30;   /* marrom principal — botões, ênfase, foco         */
  --caramelo: #B78D6C;   /* acento — detalhes e logo sobre fundo escuro     */
  --areia:    #C7BFB3;   /* bege claro — bordas e texto sobre fundo escuro  */
  --creme:    #F4F1EC;   /* fundo da coluna do formulário                   */
  --branco:   #FFFFFF;

  /* --- Papéis ----------------------------------------------------------- */
  --texto:              var(--cafe-900);
  --texto-suave:        #665B54;
  --texto-tenue:        #948981;
  --texto-sobre-escuro: #EEE9E3;
  --borda-forte:        var(--areia);
  --erro:               #A23B32;
  --erro-fundo:         #FBE9E7;
  --sucesso:            #316B4D;

  /* --- Tipografia -------------------------------------------------------- */
  --fonte-titulo: "Manrope", "Segoe UI", system-ui, sans-serif;
  --fonte-texto:  "DM Sans", "Segoe UI", system-ui, sans-serif;
  --t-micro: 11px;

  /* --- Espaçamento ------------------------------------------------------- */
  --e-3: .75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;

  /* --- Forma ------------------------------------------------------------- */
  --raio-sm: 8px;
  --raio-lg: 18px;
  --sombra-lg: 0 22px 60px rgba(42, 29, 23, .12);
  --transicao: .18s ease;
}

/* --- Ritmo vertical do formulário -------------------------------------- */
:root {
  --gap-grupo:  26px;   /* entre um campo e o próximo                       */
  --gap-par:    20px;   /* entre as duas colunas de um campo duplo          */
  --gap-opcao:  10px;   /* entre caixas de seleção e botões de opção        */
  --gap-rotulo:  9px;   /* entre o rótulo e o controle                      */

  --creme-2: #EDE8E0;
  --borda:   #DCD5CB;
  --raio-md: 12px;
  --raio-pill: 999px;
  --sombra-sm: 0 2px 8px rgba(42, 29, 23, .06);
  --sombra-md: 0 12px 32px rgba(42, 29, 23, .09);
  --t-pequeno: 13px;
  --e-2: .5rem;  --e-6: 2rem;  --e-7: 2.5rem;  --e-8: 3rem;  --e-9: 4rem;
}