/**
 * Fonts Management - ProGrid Theme
 *
 * Sistema ligero de gestión de fuentes
 * Optimizado para performance y carga rápida
 *
 * @package ProGrid
 * @version 1.0.0
 */

/* ============================================
   FONT DEFINITIONS
   ============================================ */

/**
 * Para añadir una fuente personalizada:
 *
 * 1. Coloca los archivos WOFF2 en: /frontend/assets/fonts/
 * 2. Añade el @font-face aquí
 * 3. Usa la fuente en tu CSS
 */

/* Fuente del título - TWK Lausanne 900 */
@font-face {
    font-family: 'TWK Lausanne 1000';
    src: url('../fonts/TWK Lausanne 900.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Fuente del body - TWK Lausanne 100 */
@font-face {
    font-family: 'TWK Lausanne';
    src: url('../fonts/TWK Lausanne 100.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   FONT STACK CONFIGURATION
   ============================================ */

/**
 * Define tu stack de fuentes aquí
 * Estas variables se usan en global.css
 */

:root {
    /* Fuente principal del sitio - TWK Lausanne */
    --font-primary: 'TWK Lausanne', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Fuente secundaria (si la necesitas) */
    --font-secondary: 'Georgia', 'Times New Roman', serif;

    /* Fuente monospace (para código) */
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    /* Tamaños de fuente */
    --font-size-xs: 11px;        /* Mobile */
    --font-size-sm: 12px;        /* Base desktop */
    --font-size-base: 12px;      /* Base (cambiado de 13px a 12px) */
    --font-size-md: 26px;        /* Títulos grandes */
    --font-size-lg: 32px;        /* Títulos muy grandes */
    --font-size-xl: 48px;        /* Títulos hero */

    /* Pesos de fuente */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;   /* Peso actual de ABC Diatype Medium */
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

/* ============================================
   FONT LOADING OPTIMIZATION
   ============================================ */

/**
 * font-display: swap
 * Muestra el texto inmediatamente con fuente sistema
 * mientras carga la fuente personalizada
 *
 * Opciones:
 * - auto: navegador decide
 * - block: oculta texto hasta que cargue (malo para UX)
 * - swap: muestra con fuente sistema primero (RECOMENDADO)
 * - fallback: híbrido entre block y swap
 * - optional: usa fuente sistema si tarda mucho
 */

/* ============================================
   USAGE EXAMPLES
   ============================================ */

/**
 * Cómo usar las fuentes en tu CSS:
 *
 * body {
 *     font-family: var(--font-primary);
 *     font-size: var(--font-size-base);
 * }
 *
 * .heading {
 *     font-family: var(--font-primary);
 *     font-size: var(--font-size-md);
 *     font-weight: var(--font-weight-medium);
 * }
 *
 * code {
 *     font-family: var(--font-mono);
 * }
 */

/* ============================================
   PERFORMANCE TIPS
   ============================================ */

/**
 * 1. Usa solo WOFF2 para browsers modernos
 * 2. Limita a 2-3 weights por fuente
 * 3. Usa font-display: swap
 * 4. Preload fuentes críticas en header.php
 * 5. Subset fuentes si es posible (solo caracteres necesarios)
 *
 * Ejemplo de preload en header.php:
 * <link rel="preload" href="/frontend/assets/fonts/stand-font.woff2" as="font" type="font/woff2" crossorigin>
 */

/* ============================================
   FONT SUBSETTING
   ============================================ */

/**
 * Para reducir el tamaño de las fuentes:
 *
 * 1. Usa herramientas como:
 *    - https://everythingfonts.com/subsetter
 *    - https://transfonter.org/
 *    - glyphhanger (CLI)
 *
 * 2. Incluye solo los caracteres que necesitas:
 *    - Basic Latin (inglés)
 *    - Latin Extended (español, francés, etc.)
 *    - Números y símbolos comunes
 *
 * 3. Esto puede reducir el tamaño 50-80%
 */

/* ============================================
   FONT WEIGHTS REFERENCE
   ============================================ */

/**
 * 100 - Thin
 * 200 - Extra Light
 * 300 - Light
 * 400 - Normal / Regular ← Default
 * 500 - Medium
 * 600 - Semi Bold
 * 700 - Bold
 * 800 - Extra Bold
 * 900 - Black
 */