/* ==========================================================================
   PEDRO TAQUES — DESIGN TOKENS · TIPOGRAFIA
   Fontes fonte: /FONTES (pasta do Drive). Convertidas para woff2 em /assets/fonts.
   ========================================================================== */

/* ---- FONTES PRINCIPAIS (uso institucional — site, landing page, documentos) ---- */

@font-face {
  font-family: "Qanelas";
  src: url("../assets/fonts/qanelas-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Qanelas";
  src: url("../assets/fonts/qanelas-heavy.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("../assets/fonts/barlow-thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../assets/fonts/barlow-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../assets/fonts/barlow-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../assets/fonts/barlow-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../assets/fonts/barlow-extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../assets/fonts/barlow-bolditalic.woff2") format("woff2");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* ---- FONTES DE APOIO ("para brincar") — USO RESTRITO. Ver 03-TIPOGRAFIA.md ----
   Nunca usar em: landing page, site oficial, peças institucionais, nome/título
   do candidato. Uso permitido apenas: elementos soltos e informais em
   Reels/Kwai/TikTok (ex.: legendas de humor, onomatopeias, stickers). */

@font-face {
  font-family: "Behoove";
  src: url("../assets/fonts/behoove-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bagile";
  src: url("../assets/fonts/bagile-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NeoZine";
  src: url("../assets/fonts/neozine-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Relaxe";
  src: url("../assets/fonts/relaxe-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "Qanelas", "Arial Narrow", sans-serif;   /* títulos, wordmark, H1/H2 */
  --font-body:    "Barlow", "Helvetica Neue", sans-serif;  /* corpo de texto, UI, botões */
  --font-apoio-manuscrita: "NeoZine", "Bagile", cursive;   /* USO RESTRITO — social apenas */

  /* Escala tipográfica (base 16px / razão ~1.25) */
  --fs-eyebrow: 0.8125rem;  /* 13px — rótulos/kicker, Barlow Light, letter-spacing alto, uppercase */
  --fs-body:    1rem;       /* 16px — Barlow Regular */
  --fs-lead:    1.25rem;    /* 20px — Barlow Light, chamadas de destaque */
  --fs-h4:      1.5rem;     /* 24px — Qanelas SemiBold */
  --fs-h3:      2rem;       /* 32px — Qanelas SemiBold */
  --fs-h2:      2.75rem;    /* 44px — Qanelas Heavy */
  --fs-h1:      4rem;       /* 64px — Qanelas Heavy, uppercase */
  --fs-display: 5.5rem;     /* 88px — hero / wordmark, Qanelas Heavy, uppercase */

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.6;

  --ls-heading: -0.01em;
  --ls-eyebrow: 0.14em;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, .display {
  font-family: var(--font-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  color: var(--color-heading, #2B1574);
}
h1, .h1, .display { font-weight: 800; }
h2, .h2, h3, .h3, h4, .h4 { font-weight: 600; }

body, p, li, .body-text {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: var(--lh-body);
}

.eyebrow, .kicker {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.btn, button, .cta {
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}