/* typography.css */

/* ------------------------------------------------------------
   FONTES LOCAIS — self-hosted woff2
   Subsets: Latin + Latin Extended (PT e EN)
   ------------------------------------------------------------ */

/* Inter — corpo */
@font-face {
  font-family: 'Inter';
  src: url('../../fonts/inter/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../../fonts/inter/Inter-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../../fonts/inter/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../../fonts/inter/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Roboto Condensed — títulos */
@font-face {
  font-family: 'Roboto Condensed';
  src: url('../../fonts/roboto-condensed/RobotoCondensed-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url('../../fonts/roboto-condensed/RobotoCondensed-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url('../../fonts/roboto-condensed/RobotoCondensed-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* ------------------------------------------------------------
   BASE — body e headings já definidos nos tokens,
   aqui completamos com o que falta
   ------------------------------------------------------------ */

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1, .h1 {
  font-family: var(--font-heading);
  font-size: var(--heading-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-secondary);
}

h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--heading-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-secondary);
}

h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--heading-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-compact);
  color: var(--color-secondary);
}

h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--heading-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-compact);
  color: var(--color-text);
}

p {
  font-size: var(--text-md);
  line-height: var(--leading-body);
}

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

em, i {
  font-style: italic;
}

small {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------
   LINKS GLOBAIS
   (nav e componentes sobrescrevem conforme necessário)
   ------------------------------------------------------------ */

a {
  color: var(--color-interactive);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--transition-fast);
}

a:hover   { color: var(--color-interactive-hover); }
a:visited { color: var(--color-secondary-dark); }

/* ------------------------------------------------------------
   CLASSES UTILITÁRIAS DE TAMANHO
   ------------------------------------------------------------ */

.text-lg  { font-size: var(--text-lg); }
.text-sm  { font-size: var(--text-sm); color: var(--color-text-muted); }
.text-xs  { font-size: var(--text-xs); color: var(--color-text-muted); }
.text-caps {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   PROSA — conteúdo gerado pelo editor WordPress
   Aplicar .entry-content ou .prose no wrapper do the_content()
   ------------------------------------------------------------ */

.entry-content > * + *,
.prose > * + * {
  margin-top: var(--space-4);
}

.entry-content p,
.prose p {
  max-width: 72ch;
}

.entry-content a,
.prose a {
  color: var(--color-interactive);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.entry-content a:hover,
.prose a:hover {
  color: var(--color-interactive-hover);
}

.entry-content ul,
.entry-content ol,
.prose ul,
.prose ol {
  padding-left: var(--space-5);
  margin-top: var(--space-3);
}

.entry-content ul,
.prose ul {
  list-style: disc;
}

.entry-content ol,
.prose ol {
  list-style: decimal;
}

.entry-content li + li,
.prose li + li {
  margin-top: var(--space-2);
}

.entry-content blockquote,
.prose blockquote {
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-primary);
  color: var(--color-text-muted);
  font-style: italic;
}

.entry-content strong,
.prose strong {
  font-weight: var(--weight-bold);
  color: var(--color-secondary-dark);
}

/* ------------------------------------------------------------
   RESPONSIVO — escala de headings em mobile
   ------------------------------------------------------------ */

@media (max-width: 768px) {
  h1, .h1 { font-size: var(--heading-md); }
  h2, .h2 { font-size: var(--heading-sm); }
  h3, .h3 { font-size: var(--heading-xs); }
}