/**
 * Sistema tipográfico RESCOP
 * Basado en Anton, Merriweather Sans y Montserrat
 */

/* === IMPORTAR FUENTES === */
@import url('https://fonts.googleapis.com/css2?family=Anton:wght@400&family=Merriweather+Sans:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&family=Montserrat:wght@400;500;600;700&display=swap');

/* === CLASES DE UTILIDAD TIPOGRÁFICA === */

/* Fuentes de display (Anton) */
.font-display {
  font-family: var(--rescop-font-display);
  font-weight: var(--rescop-weight-normal);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Texto principal (Merriweather Sans) */
.font-primary {
  font-family: var(--rescop-font-primary);
}

/* Texto secundario (Merriweather) */
.font-secondary {
  font-family: var(--rescop-font-secondary);
}

/* UI y botones (Montserrat) */
.font-ui {
  font-family: var(--rescop-font-ui);
}

/* === ESCALAS TIPOGRÁFICAS === */

/* Títulos hero */
.text-hero {
  font-family: var(--rescop-font-display);
  font-size: var(--rescop-text-hero);
  line-height: var(--rescop-text-hero-lh);
  font-weight: var(--rescop-weight-normal);
  color: var(--rescop-text-primary);
}

/* Títulos de sección */
.text-display {
  font-family: var(--rescop-font-display);
  font-size: var(--rescop-text-display);
  line-height: var(--rescop-text-display-lh);
  font-weight: var(--rescop-weight-normal);
  color: var(--rescop-text-primary);
}

/* Títulos H1 */
.text-h1 {
  font-family: var(--rescop-font-display);
  font-size: var(--rescop-text-h1);
  line-height: var(--rescop-text-h1-lh);
  font-weight: var(--rescop-weight-normal);
  color: var(--rescop-text-primary);
}

/* Texto descriptivo grande */
.text-large {
  font-family: var(--rescop-font-primary);
  font-size: var(--rescop-text-large);
  line-height: var(--rescop-text-large-lh);
  font-weight: var(--rescop-weight-normal);
  color: var(--rescop-text-secondary);
}

/* Texto de cuerpo */
.text-body {
  font-family: var(--rescop-font-primary);
  font-size: var(--rescop-text-body);
  line-height: var(--rescop-text-body-lh);
  font-weight: var(--rescop-weight-normal);
  color: var(--rescop-text-secondary);
}

/* Texto pequeño */
.text-small {
  font-family: var(--rescop-font-display);
  font-size: var(--rescop-text-small);
  line-height: var(--rescop-text-small-lh);
  font-weight: var(--rescop-weight-bold);
  color: var(--rescop-text-primary);
}

/* Texto muy pequeño */
.text-tiny {
  font-family: var(--rescop-font-primary);
  font-size: var(--rescop-text-tiny);
  line-height: var(--rescop-text-tiny-lh);
  font-weight: var(--rescop-weight-normal);
  color: var(--rescop-text-secondary);
}

/* Etiquetas micro */
.text-micro {
  font-family: var(--rescop-font-primary);
  font-size: var(--rescop-text-micro);
  font-weight: var(--rescop-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* === NAVEGACIÓN === */
.nav-link {
  font-family: var(--rescop-font-display);
  font-size: var(--rescop-text-nav);
  line-height: var(--rescop-text-nav-lh);
  font-weight: var(--rescop-weight-normal);
  color: var(--rescop-gray-primary);
  text-decoration: none;
  text-transform: uppercase;
}

.nav-link:hover {
  color: var(--rescop-red-primary);
}

.nav-link.active {
  color: var(--rescop-red-primary);
}

/* === BOTONES === */
.btn-text {
  font-family: var(--rescop-font-display);
  font-size: var(--rescop-text-button);
  font-weight: var(--rescop-weight-normal);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.btn-text-large {
  font-family: var(--rescop-font-display);
  font-size: var(--rescop-text-button-large);
  line-height: var(--rescop-text-button-large-lh);
  font-weight: var(--rescop-weight-normal);
  text-transform: uppercase;
}

.btn-text-small {
  font-family: var(--rescop-font-display);
  font-size: var(--rescop-text-button-small);
  line-height: var(--rescop-text-h1-lh);
  font-weight: var(--rescop-weight-normal);
  text-transform: uppercase;
}

/* === FECHAS Y METADATOS === */
.date-text {
  font-family: var(--rescop-font-primary);
  font-size: var(--rescop-text-body);
  line-height: var(--rescop-text-body-lh);
  font-weight: var(--rescop-weight-normal);
}

.date-beige {
  color: var(--rescop-date-beige);
}

.date-green {
  color: var(--rescop-date-green);
}

/* === FILTROS === */
.filter-text {
  font-family: var(--rescop-font-secondary);
  font-size: var(--rescop-text-filter);
  line-height: var(--rescop-text-filter-lh);
  font-weight: var(--rescop-weight-normal);
  color: var(--rescop-text-primary);
}

/* === COLORES DE TEXTO === */
.text-red-primary { color: var(--rescop-red-primary); }
.text-red-accent { color: var(--rescop-red-accent); }
.text-gray-primary { color: var(--rescop-gray-primary); }
.text-white { color: var(--rescop-text-white); }
.text-muted { color: var(--rescop-text-muted); }

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .text-hero {
    font-size: clamp(32px, 8vw, 56px);
    line-height: 1.2;
  }
  
  .text-display {
    font-size: clamp(28px, 6vw, 48px);
    line-height: 1.3;
  }
  
  .text-large {
    font-size: clamp(20px, 4vw, 36px);
    line-height: 1.4;
  }
  
  .nav-link {
    font-size: 18px;
    line-height: 1.5;
  }
}