/* Tokens da landing K&A — medidos do PSD entregue (SITE RAQUEL BOTELHO 03.psd) e amostrados do PNG.
   Referência numérica completa: tests/layout-referencia-psd.json (px CSS a 1440 px de largura = px do PSD × 1440/3689).

   FONTES (Emenda 4):
   · Títulos: Abhaya Libre Medium — é a fonte que o layout realmente usa (camadas de texto do PSD). OFL, embutida.
   · Textos: o layout usa Gotham (Hoefler&Co., proprietária, sem licença web). Montserrat (OFL) é o SUBSTITUTO
     PROVISÓRIO de métrica próxima; confirmar a licença da Gotham com a K&A se a identidade exigir a original. */

@font-face { font-family: "Abhaya Libre"; src: url("../fonts/abhaya-libre-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* cores amostradas do layout */
  --verde: #57704f;
  --verde-rotulo: #5f6f52;
  --marfim: #fffae0;
  --creme: #fefae0;
  --branco: #ffffff;
  --laranja: #fd6600;
  --laranja-nav: #de660f;
  --laranja-numero: #833c08;
  --cafe: #42382d;
  --cafe-borda: #443528;
  --cafe-texto: #2e2e2e;
  --cafe-rotulo: #695e52;
  --estrela: #fecb00;

  /* tipografia */
  --fonte-titulo: "Abhaya Libre", Georgia, "Times New Roman", serif;
  --fonte-texto: "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;

  /* forma */
  --raio-botao: 1.78rem;      /* 28,5px: o layout usa retângulo arredondado, não pílula */
  --raio-botao-mobile: 0.95rem; /* 15px: no layout o raio é 1/3 da altura do botão (28,5/85); nos ~45px do celular dá ~15px */
  --raio-card: 1.6rem;        /* 25,8px */
  --alvo: 2.75rem;            /* 44px */
  --largura-max: 90rem;

  /* mobile/tablet (sem layout de referência abaixo de 900px) */
  --t-micro: 0.75rem;
  --t-pequeno: 0.875rem;
  --t-base: 1rem;
  --t-lead: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem);
  --t-h2: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --t-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --secao-y: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  --sombra-botao: 0 0.5rem 1.25rem rgba(253, 102, 0, 0.28);

  /* unidade do layout de referência: 1 "px do layout" = 1/1440 da largura da janela */
  --u: calc(100vw / 1440);
}