/* ============================================================
   FONTES — único lugar para alterar a tipografia do site.

   Usado em todas as páginas. O style.css só usa estas variáveis;
   não escreva font-family nem pesos de título direto nele.

   - O bloco :root é a tipografia PRINCIPAL (a que todos veem).
   - Os blocos [data-fonte="..."] são alternativas para comparar:
     abra a página com ?fonte=nome (ex.: /?fonte=playfair, /?fonte=outfit).
     Dá para combinar com as cores: /?fonte=outfit&paleta=verde
   - Para adotar uma alternativa: copie os valores dela para o :root.

   Testar sem publicar: npm run dev → http://localhost:8787 → editar → salvar → F5
   Publicar: npm run deploy

   As fontes ficam em assets/fonts/ (hospedadas no próprio site: mais rápido
   e sem enviar o IP dos visitantes ao Google). Para trocar por outra fonte,
   baixe o .woff2 em https://gwfh.mranftl.com/fonts (subconjunto "latin"),
   salve em assets/fonts/ e declare abaixo com @font-face.
   ============================================================ */

/* Open Sans — textos na alternativa ?fonte=playfair (variável: pesos 300 a 800) */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../assets/fonts/opensans-latin.woff2") format("woff2");
}
/* Playfair Display — títulos na alternativa ?fonte=playfair (variável: pesos 400 a 900) */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/playfair-latin.woff2") format("woff2");
}
/* Italiana — marca na alternativa ?fonte=playfair (só peso 400; use em tamanhos grandes) */
@font-face {
  font-family: "Italiana";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/italiana-latin.woff2") format("woff2");
}
/* Sora — principal (variável: pesos 100 a 800) */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../assets/fonts/sora-latin.woff2") format("woff2");
}
/* Outfit — fonte original (usada na alternativa ?fonte=outfit) */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/outfit-latin.woff2") format("woff2");
}

/* ---------- PRINCIPAL: Sora (uma família só, como em agenciaretha.com.br/lp) ---------- */
:root {
  --font-body: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;      /* textos, formulário, botões */
  --font-heading: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;   /* títulos e números de resultado */
  --font-brand: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;     /* "Aline Pacheco" no topo e no rodapé */

  --weight-body: 400;          /* textos corridos (a página de referência usa 300; 400 lê melhor nos textos pequenos) */
  --weight-heading: 700;       /* títulos (h1, h2, chamada final) */
  --weight-subheading: 600;    /* subtítulos (h3, título do formulário) */
  --weight-number: 700;        /* números: "R$716 mil", "+150"… */
  --heading-tracking: -.02em;  /* espaço entre letras dos títulos (negativo = mais juntas; a Sora é larga) */
  --heading-scale: .9;         /* tamanho dos títulos e números (1 = padrão; .9 = 10% menores) */
  --body-line-height: 1.65;    /* altura da linha dos textos */
  --brand-size: 1rem;          /* tamanho do nome da marca no topo */
  --brand-footer-size: .9rem;  /* tamanho do nome da marca no rodapé */
  --weight-brand: 600;         /* peso do nome da marca */
}

/* ---------- ?fonte=playfair  (Playfair Display + Open Sans + Italiana) ---------- */
:root[data-fonte="playfair"] {
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-brand: "Italiana", "Playfair Display", Georgia, serif;
  --weight-body: 400;
  --weight-heading: 700;
  --weight-subheading: 600;
  --weight-number: 700;
  --heading-tracking: 0;
  --heading-scale: 1;
  --body-line-height: 1.6;
  --brand-size: 1.35rem;
  --brand-footer-size: 1.15rem;
  --weight-brand: 400;         /* a Italiana só tem 400; mais que isso fica "negrito falso" */
}

/* ---------- ?fonte=outfit  (tipografia original) ---------- */
:root[data-fonte="outfit"] {
  --font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brand: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --weight-body: 400;
  --weight-heading: 800;
  --weight-subheading: 700;
  --weight-number: 800;
  --heading-tracking: -.01em;
  --heading-scale: 1;
  --body-line-height: 1.6;
  --brand-size: .95rem;
  --brand-footer-size: .85rem;
  --weight-brand: 700;
}