/* /public/css/typography.css */
html {
  font-size: var(--font-size-root);
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  line-height: var(--line-height-default);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.main-copy {
  max-width: var(--measure);
}

/* ===== Headings – variante FIXA ===== */
.h1,
h1 {
  font-size: var(--fs-h1);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
}

.h2,
h2 {
  font-size: var(--fs-h2);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
}

.h3,
h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
  font-weight: var(--font-weight-semibold);
}

.h4,
h4 {
  font-size: var(--fs-h4);
  line-height: 1.25;
  font-weight: var(--font-weight-semibold);
}

.h5,
h5 {
  font-size: var(--fs-h5);
  line-height: 1.3;
  font-weight: var(--font-weight-medium);
}

.h6,
h6 {
  font-size: var(--fs-h6);
  line-height: 1.35;
  font-weight: var(--font-weight-medium);
  text-transform: none;
}

/* ===== Headings – variante FLUÍDA ===== */
.h1-fluid {
  font-size: var(--ffs-h1);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
}

.h2-fluid {
  font-size: var(--ffs-h2);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
}

.h3-fluid {
  font-size: var(--ffs-h3);
  line-height: 1.2;
  font-weight: var(--font-weight-semibold);
}

.h4-fluid {
  font-size: var(--ffs-h4);
  line-height: 1.25;
  font-weight: var(--font-weight-semibold);
}

.h5-fluid {
  font-size: var(--ffs-h5);
  line-height: 1.3;
  font-weight: var(--font-weight-medium);
}

.h6-fluid {
  font-size: var(--ffs-h6);
  line-height: 1.35;
  font-weight: var(--font-weight-medium);
}

/* Parágrafos & utilitários */
p {
  font-size: var(--fs-p);
  margin: 0 0 1rem;
}

.lead {
  font-size: var(--ffs-lead);
  line-height: var(--line-height-relaxed);
  color: var(--text);
  font-weight: var(--font-weight-regular);
}

.small,
small {
  font-size: var(--fs-small);
}

.subtle {
  font-size: var(--fs-subtle);
  color: var(--text-muted);
}

.muted,
.text-muted {
  color: var(--text-muted);
}

/* Listas */
ul,
ol {
  padding-left: 1.25rem;
  margin: 0 0 1rem;
}

li+li {
  margin-top: 0.25rem;
}

/* Blockquote – estilo limpo, referência Bootstrap */
blockquote {
  margin: 1.25rem 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--border-subtle);
  background: #faf9fc;
  color: var(--text);
  font-style: italic;
}

blockquote footer,
blockquote cite {
  display: block;
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-style: normal;
}

/* Código inline e blocos, referências Bootstrappy */
code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: #f3f1f7;
  padding: 0.125em 0.375em;
  border-radius: 0.375rem;
}

pre {
  background: #1e162f;
  color: #f7f6fa;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow: auto;
}

pre code {
  background: transparent;
  padding: 0;
}

/* Tabelas (limpas, inspiradas no Bootstrap) */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  background: var(--surface);
  font-size: 0.9375rem;
}

th,
td {
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border-subtle);
  text-align: left;
}

thead th {
  background: #f4f2f8;
  font-weight: var(--font-weight-semibold);
}

tbody tr:nth-child(even) td {
  background: #fbfafc;
}

/* Helpers (espaçamento e alinhamento) */
.mt-0 {
  margin-top: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}