/* ============================================================
   typography.css — Fundación 20 de Enero · Corazón Sabanero
   Sistema tipográfico. Requiere: tokens.css
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size:   var(--text-md);
  font-weight: 400;
  color:       var(--c-text-primary);
  line-height: 1.65;
}

/* ── Encabezados ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color:       var(--c-text-primary);
  line-height: 1.1;
  font-weight: 600;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }
h4 { font-size: var(--text-xl); }

/* ── Párrafo ── */
p {
  color: var(--c-text-secondary);
  max-width: 72ch;
}

/* ── Lead (párrafo destacado) ── */
.text-lead {
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--c-text-secondary);
}

/* ── Eyebrow (etiqueta de sección) ── */
.eyebrow-label {
  display:       inline-block;
  font-family:   var(--font-body);
  font-size:     var(--text-xs);
  font-weight:   700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:         var(--c-brand-primary);
  margin-bottom: var(--space-3);
  position:      relative;
  padding-left:  28px;
}

.eyebrow-label::before {
  content:    '';
  position:   absolute;
  left:       0;
  top:        50%;
  width:      18px;
  height:     2px;
  background: var(--c-brand-accent);
  transform:  translateY(-50%);
}

/* Variante sobre fondos oscuros */
.eyebrow-label--light {
  color: var(--color-dorado-claro);
}
.eyebrow-label--light::before {
  background: var(--color-dorado-claro);
}

/* ── Utilidades de texto ── */
.text-center   { text-align: center; }
.text-left     { text-align: left; }

.text-primary   { color: var(--c-text-primary) !important; }
.text-secondary { color: var(--c-text-secondary) !important; }
.text-inverse   { color: var(--c-text-inverse) !important; }
.text-brand     { color: var(--c-brand-primary) !important; }
.text-accent    { color: var(--c-brand-accent) !important; }

/* Accesibilidad: texto visualmente oculto pero legible por lectores */
.sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}