/* ========================================
   SISTEMA DE TIPOGRAFÍA MODERNA - CRISAL
   ========================================

   Este archivo centraliza todas las fuentes del proyecto.
   Solo se importan 2 tipografías modernas para optimizar rendimiento:

   1. Inter - Tipografía principal para UI, cuerpo de texto y títulos
   2. Playfair Display - Tipografía secundaria para títulos destacados

   ======================================== */

/* Importar Inter desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* Importar Playfair Display desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap');

/* ========================================
   VARIABLES CSS PARA TIPOGRAFÍAS
   ======================================== */

:root {
  /* Familia de fuentes */
  --font-principal: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-titulos: 'Playfair Display', Georgia, serif;

  /* Pesos de fuente */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;
}

/* ========================================
   CLASES UTILITARIAS DE TIPOGRAFÍA
   ======================================== */

/* Tipografía principal (Inter) */
.font-principal {
  font-family: var(--font-principal);
}

/* Tipografía para títulos (Playfair Display) */
.font-titulos {
  font-family: var(--font-titulos);
}

/* Pesos de fuente */
.font-light {
  font-weight: var(--font-light);
}

.font-regular {
  font-weight: var(--font-regular);
}

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

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

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

.font-extrabold {
  font-weight: var(--font-extrabold);
}

.font-black {
  font-weight: var(--font-black);
}

/* ========================================
   ESTILOS BASE DEL DOCUMENTO
   ======================================== */

body {
  font-family: var(--font-principal);
  font-weight: var(--font-regular);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titulos);
  font-weight: var(--font-bold);
}

/* Títulos con estilo especial (para reemplazar fuentes decorativas) */
.titulo-decorativo {
  font-family: var(--font-titulos);
  font-weight: var(--font-bold);
  font-style: italic;
  letter-spacing: 0.02em;
}

/* Para textos que necesiten énfasis elegante */
.texto-elegante {
  font-family: var(--font-titulos);
  font-weight: var(--font-regular);
  font-style: italic;
}