/* =========================================================
   TYPOGRAPHY.CSS
   Sistema tipográfico (docs/design-system.md §2).
   Kanit = fonte principal (100% da UI).
   Lazer 84 = uso pontual (headline do Hero, citações).
   Escala mobile-first com clamp() para fluidez entre
   breakpoints, evitando "saltos" bruscos em resize.
   ========================================================= */

/* Kanit self-hosted (assets/fonts/) — fonte oficial da marca, baixada
   diretamente do repositório open-source google/fonts (OFL). Self-hosting
   evita dependência de CDN externo e melhora performance/privacidade. */
@font-face {
  font-family: "Kanit";
  src: url("../fonts/Kanit-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kanit";
  src: url("../fonts/Kanit-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kanit";
  src: url("../fonts/Kanit-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kanit";
  src: url("../fonts/Kanit-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Caveat (self-hosted, variável) — substituta open-source de "Lazer 84"
   enquanto os arquivos licenciados da fonte oficial não chegam. */
@font-face {
  font-family: "Caveat";
  src: url("../fonts/Caveat-Variable.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* "Lazer84" real (quando os arquivos licenciados chegarem, ver README).
   Enquanto o arquivo não existe, o navegador ignora esta regra e usa
   o fallback "Caveat" definido em --font-secondary (variables.css). */
@font-face {
  font-family: "Lazer84";
  src: url("../fonts/Lazer84.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-background);
}

h1,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  font-weight: var(--fw-semibold);
}

h2 {
  font-family: var(--font-primary);
  color: var(--color-dark-600);
  font-weight: var--fw-semibold;
}


/* clamp(mínimo, preferido-fluido, máximo) — mobile → desktop */
h1,
.text-h1 {
  font-size: clamp(2rem, 1.6rem + 1.8vw, 3.5rem); /* 32px → 56px */
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: var(--fw-semibold);
}

h2,
.text-h2 {
  font-size: clamp(1.625rem, 1.4rem + 1.1vw, 2.5rem); /* 26px → 40px */
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h3,
.text-h3 {
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 2rem); /* 22px → 32px */
  line-height: 1.25;
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
}

h4,
.text-h4 {
  font-size: clamp(1.125rem, 1.03rem + 0.35vw, 1.5rem); /* 18px → 24px */
  line-height: 1.3;
  font-weight: var(--fw-medium);
}

h5,
.text-h5 {
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.25rem); /* 16px → 20px */
  line-height: 1.35;
  font-weight: var(--fw-medium);
}

h6,
.text-eyebrow {
  font-size: clamp(0.8125rem, 0.79rem + 0.08vw, 0.875rem); /* 13px → 14px */
  line-height: 1.4;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-600);
}

p,
.text-body {
  font-size: 1rem; /* 16px */
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.text-body-sm {
  font-size: 0.875rem; /* 14px */
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.text-caption {
  font-size: 0.75rem; /* 12px */
  line-height: 1.4;
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
}

/* Headline de impacto — Lazer 84, uso restrito (Hero, citações) */
.text-display {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.4rem + 1.75vw, 3rem); /* 28px → 48px */
  line-height: 1.1;
}

blockquote {
  font-family: var(--font-secondary);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
  line-height: 1.3;
  color: var(--color-secondary-500);
}

strong,
b {
  font-weight: var(--fw-semibold);
}

.text-on-dark {
  color: var(--color-text-on-dark);
}

.text-on-dark-secondary {
  color: var(--color-text-on-dark-secondary);
}