/**
 * Tipografías LUUA - Luua
 * Basado en el Manual de Identidad Visual LUUA
 * Sistema tipográfico completo
 */

/* ========== KOLLEKTIF - TIPOGRAFÍA PRINCIPAL ========== */

/* Kollektif Regular */
@font-face {
    font-family: 'Kollektif';
    src: url('../fonts/Kollektif.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Kollektif Bold */
@font-face {
    font-family: 'Kollektif';
    src: url('../fonts/Kollektif-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Kollektif Italic */
@font-face {
    font-family: 'Kollektif';
    src: url('../fonts/Kollektif-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Kollektif Bold Italic */
@font-face {
    font-family: 'Kollektif';
    src: url('../fonts/Kollektif-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ========== LUUA REGULAR - FUENTE DEL LOGO ========== */

@font-face {
    font-family: 'LUUA Regular';
    src: url('../fonts/LUUA-REGULAR.OTF') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ========== VARIABLES TIPOGRÁFICAS LUUA ========== */

:root {
    /* Fuentes según Manual de Identidad LUUA */
    --font-logo: 'LUUA Regular', cursive;
    --font-primary: 'Kollektif', 'Open Sans', sans-serif;
    --font-secondary: 'Open Sans', 'Kollektif', sans-serif;
    --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* 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 */
    
    /* Alturas de línea */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Espaciado de letras */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
}

/* ========== CLASES TIPOGRÁFICAS LUUA ========== */

/* Títulos principales con fuente LUUA */
.luua-logo-text {
    font-family: var(--font-logo);
    font-weight: 400;
    letter-spacing: var(--letter-spacing-normal);
}

/* Títulos y encabezados con Kollektif */
.luua-heading {
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

.luua-subheading {
    font-family: var(--font-primary);
    font-weight: 600;
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
}

/* Texto del cuerpo con Open Sans */
.luua-body {
    font-family: var(--font-secondary);
    font-weight: 400;
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
}

.luua-body-bold {
    font-family: var(--font-secondary);
    font-weight: 600;
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
}

/* Texto pequeño */
.luua-small {
    font-family: var(--font-secondary);
    font-weight: 400;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

/* Botones y elementos interactivos */
.luua-button-text {
    font-family: var(--font-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

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

/* Aplicar Kollektif como fuente principal del sistema */
body {
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
}

/* Encabezados */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

/* Párrafos y texto del cuerpo */
p, .text-body {
    font-family: var(--font-secondary);
    font-weight: 400;
    line-height: var(--line-height-normal);
}

/* Botones */
.btn {
    font-family: var(--font-primary);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-wide);
}

/* Formularios */
.form-label {
    font-family: var(--font-primary);
    font-weight: 600;
}

.form-control, .form-select {
    font-family: var(--font-secondary);
    font-weight: 400;
}

/* Navegación */
.nav-link {
    font-family: var(--font-primary);
    font-weight: 500;
}

/* Alertas y mensajes */
.alert {
    font-family: var(--font-secondary);
    font-weight: 500;
}

/* ========== UTILIDADES TIPOGRÁFICAS ========== */

/* Tamaños de fuente */
.fs-xs { font-size: var(--font-size-xs) !important; }
.fs-sm { font-size: var(--font-size-sm) !important; }
.fs-base { font-size: var(--font-size-base) !important; }
.fs-lg { font-size: var(--font-size-lg) !important; }
.fs-xl { font-size: var(--font-size-xl) !important; }
.fs-2xl { font-size: var(--font-size-2xl) !important; }
.fs-3xl { font-size: var(--font-size-3xl) !important; }
.fs-4xl { font-size: var(--font-size-4xl) !important; }
.fs-5xl { font-size: var(--font-size-5xl) !important; }

/* Pesos de fuente */
.fw-light { font-weight: 300 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }

/* Alturas de línea */
.lh-tight { line-height: var(--line-height-tight) !important; }
.lh-normal { line-height: var(--line-height-normal) !important; }
.lh-relaxed { line-height: var(--line-height-relaxed) !important; }

/* Espaciado de letras */
.ls-tight { letter-spacing: var(--letter-spacing-tight) !important; }
.ls-normal { letter-spacing: var(--letter-spacing-normal) !important; }
.ls-wide { letter-spacing: var(--letter-spacing-wide) !important; }
.ls-wider { letter-spacing: var(--letter-spacing-wider) !important; }

/* Familias de fuente específicas */
.font-logo { font-family: var(--font-logo) !important; }
.font-primary { font-family: var(--font-primary) !important; }
.font-secondary { font-family: var(--font-secondary) !important; }
.font-system { font-family: var(--font-system) !important; }

/* ========== RESPONSIVE TYPOGRAPHY ========== */

/* Ajustes para pantallas pequeñas */
@media (max-width: 576px) {
    :root {
        --font-size-3xl: 1.625rem;  /* 26px */
        --font-size-4xl: 2rem;      /* 32px */
        --font-size-5xl: 2.5rem;    /* 40px */
    }
}

/* Ajustes para pantallas muy pequeñas */
@media (max-width: 375px) {
    :root {
        --font-size-2xl: 1.375rem;  /* 22px */
        --font-size-3xl: 1.5rem;    /* 24px */
        --font-size-4xl: 1.75rem;   /* 28px */
        --font-size-5xl: 2.25rem;   /* 36px */
    }
}