/* ============================================================
   GLUTE STRONG by Angela Borges
   Design tokens. Single source of truth for cor e tipografia.
   Valores lidos do Manual de Aplicação, páginas 04 e 05.
   ============================================================ */

/* ---------- Fontes ---------- */
/* Arian LT, títulos e textos de impacto. Manual p.05.
   Registrada como uma família com três pesos, mais limpo que três famílias. */
@font-face {
  font-family: 'Arian LT';
  src: url('../fonts/ArianLT-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Arian LT';
  src: url('../fonts/ArianLT-Demi.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Arian LT';
  src: url('../fonts/ArianLT-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* League Spartan, textos complementares. */
@font-face {
  font-family: 'League Spartan';
  src: url('../fonts/LeagueSpartan-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'League Spartan';
  src: url('../fonts/LeagueSpartan-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'League Spartan';
  src: url('../fonts/LeagueSpartan-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'League Spartan';
  src: url('../fonts/LeagueSpartan-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Cor, Manual p.04 ---------- */
  --preto:        #111111;  /* preto principal, fundo dominante */
  --dourado:      #C7A56A;  /* dourado claro oficial, único acento */
  --branco:       #FFFFFF;
  --grafite:      #1A1A1A;  /* superfícies elevadas */
  --grafite-alt:  #292929;  /* bordas, divisores, cards */
  --cinza:        #A6A6A6;  /* texto secundário */

  /* Derivados. O dourado nunca vira luz, só superfície e traço. */
  --dourado-tenue:  rgba(199, 165, 106, 0.14); /* preenchimento de card */
  --dourado-linha:  rgba(199, 165, 106, 0.34); /* borda 1px */
  --preto-vidro:    rgba(17, 17, 17, 0.72);    /* overlay sobre imagem */

  /* ---------- Tipografia ---------- */
  --f-titulo: 'Arian LT', 'Eurostile', 'Michroma', sans-serif;
  --f-texto:  'League Spartan', 'Inter', system-ui, sans-serif;

  /* Escala fluida. Nada de media queries para tamanho de fonte. */
  --t-display: clamp(2.75rem, 7.2vw, 6.5rem);   /* hero h1 */
  --t-h1:      clamp(2.25rem, 5vw,   4rem);
  --t-h2:      clamp(1.75rem, 3.4vw, 2.75rem);
  --t-h3:      clamp(1.25rem, 2vw,   1.6rem);
  --t-lead:    clamp(1.05rem, 1.5vw, 1.3rem);   /* subheadline */
  --t-corpo:   1rem;
  --t-peq:     0.875rem;
  --t-olho:    0.75rem;                          /* eyebrow */

  /* Entrelinha. Título fecha, corpo respira. */
  --lh-display: 0.94;
  --lh-titulo:  1.06;
  --lh-corpo:   1.7;

  /* Tracking. Arian é larga por natureza, títulos grandes pedem tracking negativo. */
  --ls-display: -0.02em;
  --ls-titulo:  -0.01em;
  --ls-olho:     0.2em;

  /* ---------- Ritmo ---------- */
  --gap-xs: 0.5rem;
  --gap-s:  1rem;
  --gap-m:  2rem;
  --gap-l:  4rem;
  --gap-xl: clamp(5rem, 10vw, 9rem);   /* respiro entre seções */
  --col-max: 1240px;                    /* coluna de conteúdo */
  --pad-lat: clamp(1.25rem, 5vw, 4rem); /* margem de segurança lateral */
}

/* ---------- Papéis tipográficos ---------- */

.t-display {
  font-family: var(--f-titulo);
  font-weight: 600;                 /* Arian LT Demi, o peso que o manual pede */
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--branco);
  text-wrap: balance;
}

.t-h2 {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  color: var(--branco);
  text-wrap: balance;
}

.t-h3 {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.25;
  color: var(--branco);
}

/* Eyebrow. O "ESTA ACADEMIA TEM" do manual. */
.t-olho {
  font-family: var(--f-texto);
  font-weight: 500;
  font-size: var(--t-olho);
  letter-spacing: var(--ls-olho);
  text-transform: uppercase;
  color: var(--dourado);
}

/* Subheadline. Manual: no máximo 50% do tamanho da headline. */
.t-lead {
  font-family: var(--f-texto);
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--cinza);
  max-width: 46ch;
  text-wrap: pretty;
}

.t-corpo {
  font-family: var(--f-texto);
  font-weight: 400;
  font-size: var(--t-corpo);
  line-height: var(--lh-corpo);
  color: var(--cinza);
  max-width: 62ch;
  text-wrap: pretty;
}

/* Acento. Uma palavra por headline, nunca mais. */
.dourado { color: var(--dourado); }

/* Regra do manual p.05: evitar caixa alta em textos longos.
   Caixa alta só em display, eyebrow e CTA. */