/**
 * Sistema de Tipografías - APUS Theme
 *
 * Por defecto usa SYSTEM FONTS para máximo rendimiento y Core Web Vitals.
 * Poppins es opcional y se carga solo si se activa en el Customizer.
 *
 * Basado en especificaciones del template del cliente.
 *
 * @package Apus_Theme
 * @since 1.0.0
 */

/* ============================================
   SYSTEM FONTS (Por defecto - Recomendado)
   ============================================ */

:root {
    /* Stack de fuentes del sistema - Según especificación del template */
    --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                   Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

    /* Fuente primaria - Por defecto usa system fonts */
    --font-primary: var(--font-system);

    /* Fuente para encabezados - Misma que body por defecto */
    --font-headings: var(--font-system);

    /* Fuente para código (monospace) */
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
                 Consolas, 'Courier New', monospace;

    /* Tamaños de fuente base */
    --font-size-base: 16px;
    --line-height-base: 1.6;
}

/* Aplicar fuente del sistema por defecto */
body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: #333;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Encabezados */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a1a;
    margin-top: 0;
    margin-bottom: 0.5em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/* Código y preformateado */
code, pre, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* ============================================
   POPPINS (Opcional - Solo si se activa)
   ============================================

   Las siguientes declaraciones @font-face solo
   se cargan cuando el usuario activa "Use Custom Fonts"
   en Apariencia > Personalizar > Tipografía.

   Para activar Poppins:
   1. Descargar archivos WOFF2 de Google Fonts
   2. Colocar en assets/fonts/poppins/
   3. Descomentar las declaraciones @font-face
   4. Activar en Customizer

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

/*
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Regular.woff2') format('woff2'),
         url('../fonts/poppins/Poppins-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Medium.woff2') format('woff2'),
         url('../fonts/poppins/Poppins-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-SemiBold.woff2') format('woff2'),
         url('../fonts/poppins/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Bold.woff2') format('woff2'),
         url('../fonts/poppins/Poppins-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
*/

/* Cuando Poppins esté activo, se aplica con clase .use-custom-fonts */
/*
.use-custom-fonts {
    --font-primary: 'Poppins', var(--font-system);
    --font-headings: 'Poppins', var(--font-system);
}
*/

/* ============================================
   UTILIDADES DE FUENTES
   ============================================ */

/* Font Weight Utilities */
.font-light { font-weight: 300; }
.font-regular { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Font Family Utilities */
.font-system {
    font-family: var(--font-system) !important;
}

.font-mono {
    font-family: var(--font-mono) !important;
}

/* Font Size Utilities */
.text-xs { font-size: 0.75rem; line-height: 1.4; }     /* 12px */
.text-sm { font-size: 0.875rem; line-height: 1.5; }    /* 14px */
.text-base { font-size: 1rem; line-height: 1.6; }      /* 16px */
.text-lg { font-size: 1.125rem; line-height: 1.6; }    /* 18px */
.text-xl { font-size: 1.25rem; line-height: 1.5; }     /* 20px */
.text-2xl { font-size: 1.5rem; line-height: 1.4; }     /* 24px */
.text-3xl { font-size: 1.875rem; line-height: 1.3; }   /* 30px */
.text-4xl { font-size: 2.25rem; line-height: 1.2; }    /* 36px */
.text-5xl { font-size: 3rem; line-height: 1.1; }       /* 48px */

/* Line Height Utilities */
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }

/* Text Transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* Font Smoothing */
.text-smooth,
.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.subpixel-antialiased {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

/* ============================================
   RESPONSIVE FONT SIZES
   ============================================ */

/* Móviles (< 768px) */
@media (max-width: 767px) {
    :root {
        --font-size-base: 15px;
    }

    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    h5 { font-size: 1.125rem; }
    h6 { font-size: 1rem; }
}

/* Tablets (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        --font-size-base: 16px;
    }
}

/* Desktop (> 1024px) */
@media (min-width: 1025px) {
    :root {
        --font-size-base: 16px;
    }
}

/* ============================================
   PERFORMANCE NOTES
   ============================================

   System Fonts Benefits:
   ✅ 0 HTTP requests (fuentes ya en el sistema)
   ✅ 0 KB descargados (mejora LCP)
   ✅ Sin FOIT/FOUT (sin parpadeo de texto)
   ✅ Mejor Core Web Vitals
   ✅ Familiar para usuarios (fuentes nativas)

   Custom Fonts (Poppins):
   ⚠️ Requiere descarga (~30-50 KB por peso)
   ⚠️ Impacto en LCP si no se optimiza
   ✅ Branding consistente
   ✅ Diseño específico del template

   Recomendación: Mantener system fonts por defecto.
   Solo activar Poppins si el branding lo requiere.

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