/* -----------------------------------------------------------------------------
 * Tokens de design — Capulus Corretora de Seguros
 *
 * A paleta é a da marca: o marrom #411A09 é a barra de contato e o botão do
 * herói do site antigo; o vermelho #BF2323 é o traço do eletrocardiograma do
 * logotipo. São exatamente os mesmos valores do `tema` em
 * `captacao/config/cliente.js`, para que o popup de captação e o site sejam a
 * mesma coisa visual.
 *
 * A seriedade que uma corretora precisa passar não vem de cor nova: vem de
 * hierarquia tipográfica, respiro, e prova social (42 seguradoras, SUSEP, CNPJ,
 * corretor nomeado). Por isso a paleta é curta e os cantos são quase retos.
 * -------------------------------------------------------------------------- */

:root {
  /* Marca */
  --marrom:        #411A09;
  --marrom-claro:  #6B3418;
  --marrom-fraco:  #F5F0EC;
  --vermelho:      #BF2323;

  /* Superfícies */
  --fundo:         #FFFFFF;
  --fundo-suave:   #FAF8F6;
  --fundo-escuro:  #2B1006;

  /* Texto */
  --texto:         #140803;
  --texto-suave:   #555555;
  --texto-claro:   #FFFFFF;
  --texto-inverso-suave: rgba(255, 255, 255, 0.75);

  /* Traços */
  --borda:         #DDDDDD;
  --borda-forte:   #C4B8B0;

  /* O site da marca é de cantos quase retos. Não arredondar. */
  --raio:          4px;

  /* Tipografia. Open Sans já era a fonte do site; a serifada entra só nos
     títulos, que é onde o ar institucional aparece. */
  --fonte-corpo:   "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fonte-titulo:  "Lora", Georgia, "Times New Roman", serif;

  /* Escala de espaçamento, base 4px */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e6: 1.5rem;
  --e8: 2rem;
  --e12: 3rem;
  --e16: 4rem;
  --e24: 6rem;

  /* Largura de leitura e do contêiner */
  --largura:       1140px;
  --largura-texto: 68ch;

  /* Sombras discretas — nada de cartão flutuante */
  --sombra-1: 0 1px 2px rgba(20, 8, 3, 0.06);
  --sombra-2: 0 4px 16px rgba(20, 8, 3, 0.10);
  --sombra-3: 0 12px 40px rgba(20, 8, 3, 0.18);

  --transicao: 160ms ease;
}

/* O site é de fundo claro por decisão de marca. O modo escuro do sistema não
   inverte a identidade de uma corretora; o que fazemos é respeitar quem pediu
   menos movimento. */
@media (prefers-reduced-motion: reduce) {
  :root { --transicao: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}