/**
 * @file typography.css
 * @description Carregamento das fontes locais e escala tipográfica.
 *
 * Responsabilidade: definir @font-face para Take Yours (display) e
 * Gilroy (corpo), e estabelecer hierarquia tipográfica do brandbook.
 * Camada: web
 *
 * Regra crítica: Take Yours nunca em parágrafo. Apenas em display/H1/H2.
 */

@font-face {
  font-family: 'Take Yours';
  src: url('../fonts/take-yours.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-base);
  letter-spacing: var(--tracking-base);
  color: var(--preto-tinta);
  background: var(--creme);
}

/* DISPLAY — Take Yours dominando a composição editorial */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  font-weight: 400;
}

.monumental {
  font-family: var(--font-display);
  font-size: var(--fs-monumental);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  font-weight: 400;
}

/* H1 / H2 — Take Yours em tamanhos editoriais */
h1,
.h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: 400;
}

h2,
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: 400;
}

/* H3 — Gilroy ExtraBold como apoio estrutural */
h3,
.h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

/* Lead, body, captions — Gilroy */
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  font-weight: 300;
  max-width: 56ch;
  letter-spacing: -0.005em;
}

.body {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  font-weight: 300;
  max-width: 64ch;
}

.caption {
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.overline {
  font-size: var(--fs-overline);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.overline::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
}

/* Drop cap em parágrafos editoriais */
.drop-cap::first-letter {
  font-family: var(--font-display);
  font-size: 5.5em;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.12em 0 -0.03em;
  color: var(--terracota);
  font-weight: 400;
}

/* Texto-bloco em Take Yours sangrando margem */
.bleed {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
  font-weight: 400;
}

/* Em itálico — usado em citações */
em,
.italic {
  font-style: italic;
  letter-spacing: -0.005em;
}

/* Strong — usado dentro de body */
strong {
  font-weight: 800;
  color: var(--verde-profundo);
}