/* =========================================================================
   TOKENS — Everton Martins Barcellos Advogado
   Paleta oficial extraída de "PALETA E TIPOLOGIA.pdf" e conferida pixel a
   pixel na arte original. Os contrastes abaixo foram medidos (WCAG 2.1),
   não estimados — as combinações reprovadas estão marcadas para não serem
   usadas por engano.
   ========================================================================= */

:root {
  /* --- Paleta da marca ------------------------------------------------- */
  --navy:      #00202F;  /* RGB 0-32-47      CMYK 95-71-53-64 */
  --bronze:    #6D5139;  /* RGB 109-81-57    CMYK 43-64-87-42 */
  --bronze-md: #987D58;  /* RGB 152-125-88   CMYK 38-47-75-14 */
  --ouro:      #D5C488;  /* RGB 213-196-136  CMYK 18-19-56-0  */
  --creme:     #F8EFD4;  /* RGB 248-239-212  CMYK 2-4-18-0    */

  /* Tons de apoio derivados do navy, para superfícies e bordas.
     Não fazem parte do manual — servem só para dar profundidade. */
  --navy-900: #001824;
  --navy-800: #00202F;
  --navy-700: #06304260;
  --linha:     rgba(213, 196, 136, .22);
  --linha-esc: rgba(0, 32, 47, .12);

  --branco:   #FFFFFF;
  --papel:    #FDFBF6;   /* creme bem lavado, para o corpo da página */

  /* --- Contrastes medidos (WCAG 2.1) -----------------------------------
     APROVADOS para texto corrido:
       creme  sobre navy .............. 14.66:1
       branco sobre navy .............. 16.83:1
       navy   sobre creme ............. 14.66:1
       navy   sobre branco ............ 16.83:1
       navy   sobre ouro .............. 9.68:1   <- botão principal
       ouro   sobre navy .............. 9.68:1
       bronze sobre branco ............ 7.28:1
       branco sobre bronze ............ 7.28:1

     REPROVADOS — nunca usar para texto:
       ouro      sobre branco ......... 1.74:1   x
       bronze    sobre navy ........... 2.31:1   x  (base do gradiente da logo)
       bronze-md sobre creme .......... 3.38:1   x  (só decorativo ou >=24px)
       bronze-md sobre branco ......... 3.88:1   x
       bronze-md sobre navy ........... 4.34:1   x  (só >=24px)
       branco    sobre verde WhatsApp . 1.98:1   x  (usar texto escuro)
     -------------------------------------------------------------------- */

  /* --- Papéis semânticos ----------------------------------------------- */
  --bg:            var(--papel);
  --bg-escuro:     var(--navy);
  --bg-creme:      var(--creme);

  --texto:         var(--navy);
  --texto-suave:   #4A5C66;              /* 7.4:1 sobre --papel */
  --texto-claro:   var(--creme);
  --texto-claro-2: rgba(248, 239, 212, .78);
  /* terciário do rodapé — .45 reprovava (4.04:1); .58 mede 5.9:1 sobre #001824 */
  --texto-claro-3: rgba(248, 239, 212, .58);

  --acento:        var(--ouro);
  --acento-forte:  var(--bronze);        /* único ouro/bronze legível em fundo claro */
  --ornamento:     var(--bronze-md);     /* filetes, ícones, molduras — nunca texto */

  /* --- WhatsApp --------------------------------------------------------- */
  --zap:      #25D366;
  --zap-esc:  #128C7E;
  --zap-txt:  #00202F;   /* texto escuro: branco sobre verde reprova (1.98:1) */

  /* --- Tipografia -------------------------------------------------------
     O manual pede Calleo (títulos) + Montserrat (texto). Calleo é fonte
     comercial e não tem licença web, então os títulos usam Cormorant
     Garamond, que guarda o mesmo contraste alto e ar de sobriedade.
     Se o cliente adquirir a licença web da Calleo, trocar apenas a linha
     --fonte-titulo e adicionar o @font-face.
     -------------------------------------------------------------------- */
  --fonte-titulo: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --fonte-texto:  "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala fluida — encolhe sozinha no celular, sem media query */
  --t-xs:   .75rem;
  --t-sm:   .875rem;
  --t-base: 1rem;
  --t-lg:   clamp(1.05rem, 1rem + .25vw,  1.2rem);
  --t-xl:   clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
  --t-2xl:  clamp(1.6rem, 1.35rem + 1.1vw, 2.2rem);
  --t-3xl:  clamp(2rem, 1.5rem + 2.2vw, 3.1rem);
  --t-4xl:  clamp(2.3rem, 1.6rem + 3.2vw, 3.9rem);

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-semi:   600;
  --peso-bold:   700;

  --lh-apertado: 1.15;
  --lh-titulo:   1.2;
  --lh-texto:    1.72;   /* respiro alto: a maior parte do tráfego é mobile */

  /* --- Espaçamento ------------------------------------------------------ */
  --e-1: .25rem;  --e-2: .5rem;   --e-3: .75rem;  --e-4: 1rem;
  --e-5: 1.5rem;  --e-6: 2rem;    --e-7: 2.5rem;  --e-8: 3rem;
  --e-9: 4rem;    --e-10: 5rem;   --e-11: 6rem;

  --secao-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --largura: 1140px;
  --largura-texto: 68ch;

  /* --- Formas ----------------------------------------------------------- */
  --raio-sm: 4px;
  --raio:    8px;
  --raio-lg: 14px;
  --raio-pill: 999px;

  --sombra-sm: 0 1px 2px rgba(0, 32, 47, .06), 0 2px 8px rgba(0, 32, 47, .05);
  --sombra:    0 2px 6px rgba(0, 32, 47, .07), 0 12px 28px rgba(0, 32, 47, .08);
  --sombra-lg: 0 8px 24px rgba(0, 32, 47, .1), 0 24px 60px rgba(0, 32, 47, .12);
  --sombra-zap: 0 4px 14px rgba(37, 211, 102, .38);

  --transicao: 180ms cubic-bezier(.4, 0, .2, 1);
  --foco: 3px solid var(--ouro);
  --foco-escuro: 3px solid var(--navy);
}

/* O site é claro por decisão de marca (papel + navy). Não há tema escuro:
   inverter a paleta quebraria as regras de contraste acima. Ainda assim,
   respeitamos quem pediu menos movimento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}