/*
 * Sistema de Tipografías Runakay Theme
 * Configuración centralizada para tipografías con capacidad de intercambio rápido
 * 
 * Uso:
 * - Títulos (h1, h2, h3, h4, h5, h6): Roboto
 * - Subtítulos: Open Sans
 * - Párrafos y spans: Open Sans
 * - Enlaces: Roboto
 */

:root {
  /* === CONFIGURACIÓN PRINCIPAL DE TIPOGRAFÍAS === */
  
  /* Fuentes primarias (actuales) */
  --font-primary-titles: 'Roboto', sans-serif;
  --font-primary-subtitles: 'Open Sans', sans-serif;
  --font-primary-body: 'Open Sans', sans-serif;
  --font-primary-links: 'Roboto', sans-serif;
  
  /* === CONFIGURACIÓN ALTERNATIVA (para intercambio rápido) === */
  
  /* Fuentes alternativas - Sistema por defecto */
  --font-alt-titles: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-alt-subtitles: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-alt-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-alt-links: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  /* === VARIABLES DE APLICACIÓN === */
  
  /* Variables activas (cambiar entre primary y alt para intercambiar) */
  --font-titles: var(--font-primary-titles);
  --font-subtitles: var(--font-primary-subtitles);
  --font-body: var(--font-primary-body);
  --font-links: var(--font-primary-links);
  
  /* === PESOS DE FUENTE === */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  
  /* === TAMAÑOS DE FUENTE === */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */
  --font-size-6xl: 3.75rem;   /* 60px */
  
  /* === ALTURAS DE LÍNEA === */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
}

/* === APLICACIÓN DE TIPOGRAFÍAS === */

/* Títulos principales */
h1, .h1, .runakay-h1 {
  font-family: var(--font-titles);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-5xl);
  line-height: var(--line-height-tight);
}

h2, .h2, .runakay-h2 {
  font-family: var(--font-titles);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
}

h3, .h3, .runakay-h3 {
  font-family: var(--font-titles);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-snug);
}

h4, .h4, .runakay-h4 {
  font-family: var(--font-titles);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-snug);
}

h5, .h5, .runakay-h5 {
  font-family: var(--font-subtitles);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-normal);
}

h6, .h6, .runakay-h6 {
  font-family: var(--font-subtitles);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-normal);
}

/* Párrafos y texto del cuerpo */
p, .p, .runakay-body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

/* Spans */
span, .span, .runakay-span {
  font-family: var(--font-body);
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Enlaces */
a, .link, .runakay-link {
  font-family: var(--font-links);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover, .link:hover, .runakay-link:hover {
  text-decoration: underline;
}

/* === CLASES UTILITARIAS === */

/* Variaciones de peso */
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }
.font-black { font-weight: var(--font-weight-black); }

/* Variaciones de tamaño */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }
.text-6xl { font-size: var(--font-size-6xl); }

/* Variaciones de altura de línea */
.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }

/* === INSTRUCCIONES DE USO === */

/*
CÓMO INTERCAMBIAR ENTRE FUENTES:

1. Para usar las fuentes del sistema (fallback):
   Cambiar las variables activas de:
   --font-titles: var(--font-primary-titles);
   a:
   --font-titles: var(--font-alt-titles);
   
   Y así para todas las variables (subtitles, body, links)

2. Para agregar nuevas fuentes:
   - Agregar la nueva fuente al header.php
   - Definir nuevas variables --font-new-* 
   - Cambiar las variables activas para usar las nuevas

3. Para personalizar pesos o tamaños:
   - Modificar las variables de peso y tamaño según necesidad
   - Los cambios se aplicarán automáticamente en todo el sitio

EJEMPLO DE INTERCAMBIO RÁPIDO:
Para cambiar a fuentes del sistema, cambiar en :root:
--font-titles: var(--font-alt-titles);
--font-subtitles: var(--font-alt-subtitles);
--font-body: var(--font-alt-body);
--font-links: var(--font-alt-links);
*/