/**
 * ============================================
 * SISTEMA TIPOGRÁFICO - MSI STUDIO
 * ============================================
 *
 * Sistema completo de tipografía que incluye:
 * - Familias tipográficas (sans-serif, monospace)
 * - Pesos de fuente (regular, demi-bold, bold)
 * - Escalas tipográficas (Display, Heading, Subtitle, Body, Button, Label, Caption)
 * - Line heights optimizados para legibilidad
 * - Text transforms cuando aplicable
 *
 * Nomenclatura: --font-[categoría]-[tamaño]-[propiedad]
 *
 * @version 1.0.0
 */

:root {
    /* ============================================
     FONT FAMILY - Familias tipográficas
     ============================================
     Stack de fuentes con fallbacks seguros del sistema
     ============================================ */
    /* Fuente principal: Sans-serif del sistema */
    --font-family-primary: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
    /* Fuente monoespaciada: Para código y datos técnicos */
    --font-family-mono: "SF Mono", monaco, "Cascadia Code", "Roboto Mono", consolas, "Courier New", monospace;
    /* ============================================
     FONT WEIGHTS - Pesos tipográficos
     ============================================
     Tres pesos optimizados para jerarquía visual
     ============================================ */

    --font-weight-regular: 400; /* Texto normal, párrafos */
    --font-weight-demi-bold: 600; /* Semi-negrita, subtítulos, labels */
    --font-weight-bold: 700; /* Negrita, títulos, énfasis fuerte */
    /* ============================================
     TIPOGRAFÍA - DISPLAY STYLES
     ============================================ */
    /* Display One - 40px / 2.5rem */
    --font-size-display-one: 2.5rem;
    /* 40px */
    --line-height-display-one: 2.75rem;
    /* 44px */
    --font-weight-display-one: var(--font-weight-bold);
    --text-transform-display-one: capitalize;
    /* Display Two - 36px / 2.25rem */
    --font-size-display-two: 2.25rem;
    /* 36px */
    --line-height-display-two: 2.5rem;
    /* 40px */
    --font-weight-display-two: var(--font-weight-bold);
    --text-transform-display-two: capitalize;
    /* ============================================
     TIPOGRAFÍA - HEADINGS
     ============================================ */
    /* Heading 3XL - 32px / 2rem */
    --font-size-heading-3xl: 2rem;
    /* 32px */
    --line-height-heading-3xl: 2.25rem;
    /* 36px */
    --font-weight-heading-3xl: var(--font-weight-bold);
    /* Heading 2XL - 28px / 1.75rem */
    --font-size-heading-2xl: 1.75rem;
    /* 28px */
    --line-height-heading-2xl: 2rem;
    /* 32px */
    --font-weight-heading-2xl: var(--font-weight-bold);
    /* Heading XL - 24px / 1.5rem */
    --font-size-heading-xl: 1.5rem;
    /* 24px */
    --line-height-heading-xl: 1.75rem;
    /* 28px */
    --font-weight-heading-xl: var(--font-weight-bold);
    /* Heading LG - 20px / 1.25rem */
    --font-size-heading-lg: 1.25rem;
    /* 20px */
    --line-height-heading-lg: 1.5rem;
    /* 24px */
    --font-weight-heading-lg: var(--font-weight-bold);
    /* ============================================
     SUBTITLES - Subtítulos y encabezados secundarios
     ============================================
     Para introducciones de sección y subtítulos
     ============================================ */
    /* Subtitle MD - Subtítulo mediano */
    --font-size-subtitle-md: 1.125rem; /* 18px */
    --line-height-subtitle-md: 1.375rem; /* 22px - Ratio 1.22 */
    --font-weight-subtitle-md: var(--font-weight-demi-bold);
    /* Subtitle SM - Subtítulo pequeño */
    --font-size-subtitle-sm: 1rem; /* 16px */
    --line-height-subtitle-sm: 1.25rem; /* 20px - Ratio 1.25 */
    --font-weight-subtitle-sm: var(--font-weight-demi-bold);
    /* ============================================
     BODY TEXT - Texto de contenido principal
     ============================================
     Tres tamaños para párrafos y contenido general
     Optimizado para legibilidad (ratio ~1.5)
     ============================================ */
    /* Body LG - Texto grande */
    --font-size-body-lg: 1.125rem; /* 18px */
    --line-height-body-lg: 1.5rem; /* 24px - Ratio 1.33 */
    --font-weight-body-lg: var(--font-weight-regular);
    /* Body MD - Texto estándar (base) */
    --font-size-body-md: 1rem; /* 16px - Tamaño base */
    --line-height-body-md: 1.5rem; /* 24px - Ratio 1.5 */
    --font-weight-body-md: var(--font-weight-regular);
    --font-weight-body-md-bold: var(--font-weight-demi-bold);
    /* Body SM - Texto pequeño */
    --font-size-body-sm: 0.875rem; /* 14px */
    --line-height-body-sm: 1.25rem; /* 20px - Ratio 1.43 */
    --font-weight-body-sm: var(--font-weight-regular);
    --font-weight-body-sm-bold: var(--font-weight-demi-bold);
    /* ============================================
     BUTTONS - Tipografía de botones
     ============================================
     Texto para elementos interactivos (botones, CTAs)
     Semi-bold + uppercase para mayor impacto
     ============================================ */
    /* Button MD - Botón estándar */
    --font-size-button-md: 1rem; /* 16px */
    --line-height-button-md: 1.5rem; /* 24px - Ratio 1.5 */
    --font-weight-button-md: var(--font-weight-demi-bold);
    --text-transform-button-md: none; /* Sin transformar */
    /* Button SM - Botón pequeño */
    --font-size-button-sm: 0.875rem; /* 14px */
    --line-height-button-sm: 1.25rem; /* 20px - Ratio 1.43 */
    --font-weight-button-sm: var(--font-weight-demi-bold);
    --text-transform-button-sm: none; /* Sin transformar */
    /* ============================================
     LABELS - Etiquetas de formularios y UI
     ============================================
     Para labels de inputs, checkboxes, metadata
     ============================================ */
    /* Label MD - Etiqueta estándar */
    --font-size-label-md: 0.875rem; /* 14px */
    --line-height-label-md: 1.25rem; /* 20px - Ratio 1.43 */
    --font-weight-label-md: var(--font-weight-bold);
    --font-weight-label-md-demi: var(--font-weight-demi-bold);
    /* ============================================
     CAPTION - Texto auxiliar y micro-copy
     ============================================
     Para textos de ayuda, notas, metadata pequeña
     Sin text-transform para mayor versatilidad
     ============================================ */
    /* Caption - Texto auxiliar */
    --font-size-caption: 0.75rem; /* 12px */
    --line-height-caption: 1rem; /* 16px - Ratio 1.33 */
    --font-weight-caption: var(--font-weight-bold);
    --font-weight-caption-demi: var(--font-weight-demi-bold);
    --text-transform-caption: none; /* sin text-transform */

    /* ============================================
     TIPOGRAFÍA - ICONS
     ============================================

     Icons: SIN escalado fluido (valores fijos)
     Razón: Los iconos necesitan tamaños consistentes para alineación
     con otros elementos de UI y mantener proporciones visuales
     ============================================ */
    /* Icon XS - 12px FIJO */
    --font-size-icon-xs: 0.75rem; /* 12px - sin escalado */
    /* Icon SM - 16px FIJO */
    --font-size-icon-sm: 1rem; /* 16px - sin escalado */
    /* Icon MD - 18px FIJO */
    --font-size-icon-md: 1.125rem; /* 18px - sin escalado */
    /* Icon LG - 24px FIJO */
    --font-size-icon-lg: 1.5rem; /* 24px - sin escalado */
    /* Icon XL - 32px FIJO */
    --font-size-icon-xl: 2rem; /* 32px - sin escalado */
    /* Icon 2XL - 40px FIJO */
    --font-size-icon-2xl: 2.5rem; /* 40px - sin escalado */
    /* Icon 3XL - 48px FIJO */
    --font-size-icon-3xl: 3rem; /* 48px - sin escalado */
    /* Icon 4XL - 40px FIJO - AJUSTADO UX/UI 2025-11-12 */
    --font-size-icon-4xl: 2.5rem; /* 40px - sin escalado */
    /* Icon 5XL - 48px FIJO - AJUSTADO UX/UI 2025-11-12 */
    --font-size-icon-5xl: 3rem; /* 48px - sin escalado */
}