/*
==================================================
RotaBras Framework CSS
Arquivo: typography.css
Versão: 1.0
Descrição: Hierarquia tipográfica global
==================================================
*/

/* ===== Títulos ===== */
h1 {
  font-size: var(--font-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--line-tight);
  color: var(--rb-white);
  margin-bottom: var(--rb-space-md);
}

h2 {
  font-size: var(--font-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--line-tight);
  color: var(--rb-primary);
  margin-bottom: var(--rb-space-md);
}

h3 {
  font-size: var(--font-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--line-normal);
  color: var(--rb-text);
  margin-bottom: var(--rb-space-sm);
}

h4, h5, h6 {
  font-size: var(--font-xl);
  font-weight: var(--fw-medium);
  line-height: var(--line-normal);
  color: var(--rb-text-light);
  margin-bottom: var(--rb-space-sm);
}

/* ===== Parágrafos ===== */
p {
  font-size: var(--font-md);
  line-height: var(--line-normal);
  color: var(--rb-text);
  margin-bottom: var(--rb-space-md);
}

p.lead {
  font-size: var(--font-lg);
  color: var(--rb-text-light);
  line-height: var(--line-loose);
}

/* ===== Listas ===== */
ul, ol {
  margin: 0 0 var(--rb-space-md) var(--rb-space-md);
  padding: 0;
  color: var(--rb-text);
  line-height: var(--line-normal);
}

ul li::marker {
  color: var(--rb-primary);
}

ol li::marker {
  color: var(--rb-accent);
}

/* ===== Links dentro de texto ===== */
p a {
  color: var(--rb-primary);
  font-weight: var(--fw-medium);
  transition: var(--rb-transition);
}

p a:hover {
  color: var(--rb-white);
}

/* ===== Responsividade ===== */
@media (max-width: 768px) {
  h1 { font-size: var(--font-3xl); }
  h2 { font-size: var(--font-2xl); }
  h3 { font-size: var(--font-xl); }
  p  { font-size: var(--font-sm); }
}