/**
 * CENOM - Typography System
 * Escala tipográfica premium com forte hierarquia visual
 */

/* ═══════════════════════════════════════════
   HEADINGS - Editorial Premium
   ═══════════════════════════════════════════ */

h1,
.h1 {
  font-size: var(--text-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--spacing-lg);
  color: var(--color-gray-dark);
}

h2,
.h2 {
  font-size: var(--text-h2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--spacing-xl);
  color: var(--color-gray-dark);
}

h3,
.h3 {
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--spacing-md);
  color: var(--color-gray-dark);
}

h4,
.h4 {
  font-size: var(--text-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-sm);
  color: var(--color-gray-dark);
}

h5,
h6 {
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-sm);
  color: var(--color-gray-dark);
}

/* ═══════════════════════════════════════════
   BODY TEXT
   ═══════════════════════════════════════════ */

p {
  font-size: var(--text-body);
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-medium);
  margin-bottom: var(--spacing-md);
}

p:last-child {
  margin-bottom: 0;
}

/* Texto largo / leitura long-form */
.text-lg {
  font-size: var(--text-body-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-medium);
}

/* Texto pequeno / helper text */
.text-sm {
  font-size: var(--text-body-sm);
  line-height: var(--line-height-normal);
  color: var(--color-gray-medium);
}

.text-caption {
  font-size: var(--text-caption);
  line-height: var(--line-height-normal);
  color: var(--color-gray-medium);
}

/* ═══════════════════════════════════════════
   TEXT UTILITIES
   ═══════════════════════════════════════════ */

.text-bold {
  font-weight: var(--font-weight-bold);
}

.text-semibold {
  font-weight: var(--font-weight-semibold);
}

.text-medium {
  font-weight: var(--font-weight-medium);
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* Colors */
.text-primary {
  color: var(--color-primary-dark);
}

.text-accent {
  color: var(--color-accent);
}

.text-gray {
  color: var(--color-gray-medium);
}

.text-white {
  color: var(--color-white);
}

.text-muted {
  color: #555;  /* Melhorado: contraste WCAG AA 4.7:1 */
  opacity: 0.9;
  /* Era: #666 com opacity 0.7 = contraste 3.5:1 (falha) */
}

/* ═══════════════════════════════════════════
   LINKS
   ═══════════════════════════════════════════ */

a {
  color: var(--color-primary);
  transition: color var(--transition-fast);
  text-decoration: none;
  position: relative;
}

@media (hover: hover) {
  a:hover {
    color: var(--color-primary-dark);
  }
}

/* Link com sublinha discreta */
.link-underline {
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

@media (hover: hover) {
  .link-underline:hover {
    border-bottom-color: var(--color-primary-dark);
  }
}

/* ═══════════════════════════════════════════
   LISTS
   ═══════════════════════════════════════════ */

ul,
ol {
  margin-bottom: var(--spacing-lg);
  padding-left: var(--spacing-xl);
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

li {
  margin-bottom: var(--spacing-sm);
  color: var(--color-gray-medium);
}

/* ═══════════════════════════════════════════
   BLOCKQUOTE
   ═══════════════════════════════════════════ */

blockquote {
  border-left: 4px solid var(--color-primary);
  padding-left: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  font-size: var(--text-body-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-medium);
  font-style: italic;
}

blockquote p {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════
   CODE
   ═══════════════════════════════════════════ */

code,
pre {
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 0.875em;
  background: var(--color-gray-light);
  padding: 0.25em 0.5em;
  border-radius: var(--radius-sm);
  color: var(--color-gray-dark);
}

pre {
  padding: var(--spacing-md);
  overflow-x: auto;
  margin-bottom: var(--spacing-lg);
}

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

/* ═══════════════════════════════════════════
   RESPONSIVE TYPOGRAPHY
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
  h1,
  .h1 {
    margin-bottom: var(--spacing-md);
  }

  h2,
  .h2 {
    margin-bottom: var(--spacing-lg);
  }

  h3,
  .h3 {
    margin-bottom: var(--spacing-sm);
  }

  /* Reduz margem entre elementos em mobile */
  p {
    margin-bottom: var(--spacing-sm);
  }
}

/* ═══════════════════════════════════════════
   DECORATIVE TEXT STYLES
   ═══════════════════════════════════════════ */

/* Tag/badge de seção */
.section-tag {
  display: inline-block;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  opacity: 0.8;
}

/* Destaque/highlight */
.highlight {
  background: linear-gradient(
    120deg,
    rgba(0, 82, 163, 0.1),
    rgba(0, 82, 163, 0.05)
  );
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

/* ═══════════════════════════════════════════
   TIGHTEN/LOOSEN SPACING
   ═══════════════════════════════════════════ */

.tight {
  margin-bottom: var(--spacing-xs);
}

.loose {
  margin-bottom: var(--spacing-2xl);
}