/* ==========================================================================
   TYPOGRAPHY — Escala tipográfica e estilos de texto
   ========================================================================== */

/* ── Headings ───────────────────────────────────────────────────────────────── */
h1, .h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); }
h2, .h2 { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); }
h3, .h3 { font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl)); }
h4, .h4 { font-size: clamp(var(--text-lg), 2vw, var(--text-2xl)); }
h5, .h5 { font-size: var(--text-xl); }
h6, .h6 { font-size: var(--text-lg); }

/* ── Display (títulos grandes de seção/hero) ────────────────────────────────── */
.display-lg {
  font-family: var(--font-headline);
  font-size: clamp(var(--text-4xl), 6vw, 4.5rem);
  font-weight: var(--weight-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.display-md {
  font-family: var(--font-headline);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: var(--weight-bold);
  line-height: 1.1;
  text-transform: uppercase;
}

/* ── Section headline ───────────────────────────────────────────────────────── */
.headline {
  font-family: var(--font-headline);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--weight-bold);
  line-height: 1.2;
  text-transform: uppercase;
}

.headline--md {
  font-family: var(--font-headline);
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl));
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

/* ── Body copy ──────────────────────────────────────────────────────────────── */
.body-lg {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.75;
}

.body-md {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ── Labels / Mono ──────────────────────────────────────────────────────────── */
.label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-container);
}

.label--lg {
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
}

/* ── Cores de texto ─────────────────────────────────────────────────────────── */
.text-primary   { color: var(--color-primary-container); }
.text-on        { color: var(--color-on-surface); }
.text-muted     { color: var(--color-on-surface-variant); }
.text-white     { color: var(--color-white); }
.text-error     { color: var(--color-error); }

/* ── Alinhamento ────────────────────────────────────────────────────────────── */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-upper   { text-transform: uppercase; }

/* ── Conteúdo do editor (post/page content) ─────────────────────────────────── */
.entry-content {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-on-surface);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  font-family: var(--font-headline);
}

.entry-content h2 { font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl)); text-transform: uppercase; }
.entry-content h3 { font-size: clamp(var(--text-lg), 2vw, var(--text-2xl)); }

.entry-content p  { margin-bottom: var(--space-6); }

.entry-content ul,
.entry-content ol {
  margin-bottom: var(--space-6);
  padding-left: var(--space-6);
}

.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }

.entry-content li { margin-bottom: var(--space-2); }

.entry-content a {
  color: var(--color-primary-container);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}
.entry-content a:hover { color: var(--color-primary); }

.entry-content blockquote {
  border-left: 3px solid var(--color-primary-container);
  padding-left: var(--space-6);
  margin: var(--space-8) 0;
  color: var(--color-on-surface-variant);
  font-style: italic;
  font-size: var(--text-lg);
}

.entry-content pre,
.entry-content code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background-color: var(--color-surface-high);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius);
}

.entry-content code {
  padding: 0.1em 0.4em;
}

.entry-content pre {
  padding: var(--space-6);
  overflow-x: auto;
  margin-bottom: var(--space-6);
}

.entry-content pre code {
  background: none;
  border: none;
  padding: 0;
}

.entry-content table {
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-6);
}

.entry-content th,
.entry-content td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-outline-variant);
  text-align: left;
}

.entry-content th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background-color: var(--color-surface-high);
  color: var(--color-on-surface-variant);
}

.entry-content img {
  border-radius: var(--radius-lg);
  margin-block: var(--space-8);
}

.entry-content hr {
  margin-block: var(--space-10);
}