/**
 * Design Tokens - Sistema de Variables CSS
 * Proyecto: Mejor.es
 * Versión: 1.0.0
 *
 * Este archivo contiene todas las variables CSS (design tokens) del proyecto.
 * Usar estas variables asegura consistencia y facilita el mantenimiento.
 *
 * Documentación completa: /STYLE-GUIDE.md
 */

:root {
    /* ========================================
       TIPOGRAFÍA - Font Families
       ======================================== */

    /**
     * Font Principal (Montserrat)
     * Uso: Títulos, botones principales, navegación, elementos destacados
     * Pesos: 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold)
     */
    --font-primary: "Montserrat", -apple-system, BlinkMacSystemFont,
                    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
                    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    /**
     * Font Sistema (Fallback)
     * Uso: Párrafos, descripciones, contenido general
     */
    --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, sans-serif;

    /**
     * Font Monospace (Código)
     * Uso: Bloques de código, IDs técnicos, datos de debug
     */
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Roboto Mono",
                 Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* ========================================
       TIPOGRAFÍA - Type Scale
       Escala modular basada en ratio 1.25 (cuarta perfecta)
       Base: 16px (1rem)
       ======================================== */

    /**
     * Tamaños de texto - Del más pequeño al más grande
     * Cada tamaño tiene un propósito específico (ver mapeo de contexto)
     */
    --text-xs: 0.75rem;      /* 12px - Labels, metadata, fechas, tags */
    --text-sm: 0.875rem;     /* 14px - Texto pequeño, notas, labels de formulario */
    --text-base: 1rem;       /* 16px - Texto base, párrafos, cuerpo principal */
    --text-lg: 1.125rem;     /* 18px - Texto destacado, intro paragraphs, quotes */
    --text-xl: 1.25rem;      /* 20px - Subtítulos pequeños, card titles */
    --text-2xl: 1.5rem;      /* 24px - h4, subtítulos de sección */
    --text-3xl: 1.875rem;    /* 30px - h3, secciones importantes */
    --text-4xl: 2.25rem;     /* 36px - h2, títulos de página secundarios */
    --text-5xl: 3rem;        /* 48px - h1, hero, títulos principales */
    --text-6xl: 3.75rem;     /* 60px - Display (uso opcional, hero especiales) */

    /* ========================================
       TIPOGRAFÍA - Line Heights (Leading)
       Valores sin unidades para escalado automático
       ======================================== */

    /**
     * Line heights optimizados por tipo de contenido
     * - Títulos: más compactos (1-1.375)
     * - Párrafos: legibilidad óptima (1.5)
     * - Textos largos: menos fatiga (1.625)
     */
    --leading-none: 1;           /* Solo para logos, casos especiales */
    --leading-tight: 1.25;       /* h1, h2, títulos grandes - compacto e impactante */
    --leading-snug: 1.375;       /* h3, h4, h5, h6 - balance */
    --leading-normal: 1.5;       /* Párrafos, listas, texto base - legibilidad óptima */
    --leading-relaxed: 1.625;    /* Artículos largos, contenido extenso - menos fatiga */
    --leading-loose: 2;          /* Espaciado extra (uso raro) */

    /* ========================================
       TIPOGRAFÍA - Font Weights
       ======================================== */

    /**
     * Pesos tipográficos disponibles
     * Montserrat soporta: 300, 400, 500, 600, 700, 800
     */
    --font-light: 300;           /* Texto decorativo, quotes especiales */
    --font-normal: 400;          /* Texto base, párrafos, contenido general */
    --font-medium: 500;          /* Énfasis suave, labels activos, navegación */
    --font-semibold: 600;        /* Subtítulos, botones secundarios, destacados */
    --font-bold: 700;            /* Títulos, botones principales, énfasis fuerte */
    --font-extrabold: 800;       /* Solo para casos especiales (hero, display) */

    /* ========================================
       TIPOGRAFÍA - Letter Spacing (Tracking)
       ======================================== */

    /**
     * Espaciado entre letras
     * - Negativo: títulos grandes, compactar
     * - Normal: texto general
     * - Positivo: botones, mayúsculas, mejorar legibilidad
     */
    --tracking-tighter: -0.05em;  /* Títulos muy grandes */
    --tracking-tight: -0.025em;   /* Títulos grandes */
    --tracking-normal: 0;         /* Texto normal */
    --tracking-wide: 0.025em;     /* Botones, labels */
    --tracking-wider: 0.05em;     /* Mayúsculas, navegación */
    --tracking-widest: 0.1em;     /* Casos especiales */

    /* ========================================
       COLORES - Paleta Principal
       Basado en sistema de valoración 1-10
       ======================================== */

    /**
     * COLORES OFICIALES DEL PROYECTO
     * NO usar ningún otro color excepto estos
     */
    --color-blue: #2634ED;        /* Azul positivo (8-10) - Excelente, acciones positivas */
    --color-yellow: #F0D637;      /* Amarillo medio (4-7) - Valoración media */
    --color-red: #FF6004;         /* Rojo negativo (1-3) - Valoración baja */
    --color-gray: #95a5a6;        /* Gris neutral - Estados neutrales, deshabilitado */
    --color-text: #2c3e50;        /* Texto principal - Negro/gris oscuro */

    /* ========================================
       COLORES - Variantes de Intensidad
       ======================================== */

    /**
     * Variantes con transparencia para backgrounds, overlays, etc.
     */
    --color-blue-light: rgba(38, 52, 237, 0.1);
    --color-blue-medium: rgba(38, 52, 237, 0.5);
    --color-blue-dark: #1a25d0;

    --color-yellow-light: rgba(240, 214, 55, 0.1);
    --color-yellow-medium: rgba(240, 214, 55, 0.5);
    --color-yellow-dark: #d4bc2f;

    --color-red-light: rgba(255, 96, 4, 0.1);
    --color-red-medium: rgba(255, 96, 4, 0.5);
    --color-red-dark: #e65704;

    --color-gray-light: #ecf0f1;
    --color-gray-medium: #7f8c8d;
    --color-gray-dark: #5a6c7d;

    /* ========================================
       GRADIENTS OFICIALES
       Solo estos gradients están permitidos
       ======================================== */

    /**
     * Gradient Diagonal - Botones y CTAs principales
     * Representa el sistema completo de valoración (rojo → amarillo → azul)
     */
    --gradient-diagonal: linear-gradient(-45deg, #ff6004, #f0d637, #2634ed);

    /**
     * Gradient Horizontal - Bordes decorativos, separadores
     * Con transparencia para overlays y decoraciones
     */
    --gradient-horizontal: linear-gradient(90deg,
        rgba(255, 96, 4, 0.65),
        rgba(240, 214, 55, 0.65),
        rgba(38, 52, 237, 0.65),
        rgba(255, 96, 4, 0.65)
    );

    /**
     * Gradient Horizontal Rojo - Alertas, rechazos, errores críticos
     */
    --gradient-horizontal-red: linear-gradient(90deg,
        rgba(220, 53, 69, 0.5),
        rgba(255, 96, 4, 0.5),
        rgba(220, 53, 69, 0.5)
    );

    /* ========================================
       ESPACIADO - Spacing Scale
       Escala consistente para margins y paddings
       ======================================== */

    /**
     * Espaciado basado en múltiplos de 4px
     * Asegura alineación pixel-perfect y consistencia visual
     */
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-8: 2rem;       /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */

    /* ========================================
       BORDES - Border Radius
       ======================================== */

    /**
     * Radios de borde consistentes
     */
    --radius-sm: 4px;      /* Botones pequeños, inputs */
    --radius-md: 6px;      /* Botones normales, cards pequeñas */
    --radius-lg: 8px;      /* Cards, paneles */
    --radius-xl: 12px;     /* Modales, contenedores grandes */
    --radius-2xl: 16px;    /* Hero sections, elementos destacados */
    --radius-full: 9999px; /* Círculos, pills, badges */

    /* ========================================
       SOMBRAS - Box Shadows
       ======================================== */

    /**
     * Sombras sutiles para profundidad
     * Todos los valores usan negro con transparencia
     */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.25);

    /* ========================================
       TRANSICIONES - Animation Timing
       ======================================== */

    /**
     * Duraciones y funciones de timing consistentes
     */
    --transition-fast: 150ms;
    --transition-base: 300ms;
    --transition-slow: 500ms;

    --easing-linear: linear;
    --easing-ease: ease;
    --easing-ease-in: ease-in;
    --easing-ease-out: ease-out;
    --easing-ease-in-out: ease-in-out;

    /* ========================================
       BREAKPOINTS - Responsive
       ======================================== */

    /**
     * Breakpoints para media queries
     * Usar en @media (min-width: var(--breakpoint-md))
     */
    --breakpoint-sm: 640px;    /* Mobile grande */
    --breakpoint-md: 768px;    /* Tablet */
    --breakpoint-lg: 1024px;   /* Laptop */
    --breakpoint-xl: 1280px;   /* Desktop */
    --breakpoint-2xl: 1536px;  /* Desktop grande */

    /* ========================================
       Z-INDEX - Layering
       ======================================== */

    /**
     * Sistema de capas para z-index
     * Evita valores mágicos, asegura orden consistente
     */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
}

/* ========================================
   RESPONSIVE TYPOGRAPHY
   Ajustes automáticos para móviles y tablets
   ======================================== */

/**
 * MOBILE FIRST - Ajustes para pantallas pequeñas
 * En móvil, reducimos los tamaños de títulos grandes
 * pero mantenemos legibilidad del texto base
 */
@media (max-width: 768px) {
    :root {
        /* Títulos más pequeños en móvil */
        --text-5xl: 2.25rem;     /* 36px en móvil (era 48px) */
        --text-4xl: 1.875rem;    /* 30px en móvil (era 36px) */
        --text-3xl: 1.5rem;      /* 24px en móvil (era 30px) */
        --text-2xl: 1.25rem;     /* 20px en móvil (era 24px) */

        /* Espaciado más compacto en móvil */
        --space-20: 3rem;        /* 48px en móvil (era 80px) */
        --space-16: 2.5rem;      /* 40px en móvil (era 64px) */
        --space-12: 2rem;        /* 32px en móvil (era 48px) */
    }
}

/**
 * MÓVIL PEQUEÑO - Ajustes adicionales para pantallas muy pequeñas
 */
@media (max-width: 480px) {
    :root {
        /* Títulos aún más compactos */
        --text-5xl: 2rem;        /* 32px en móvil pequeño */
        --text-4xl: 1.75rem;     /* 28px en móvil pequeño */
        --text-3xl: 1.375rem;    /* 22px en móvil pequeño */

        /* Mayor line-height para mejor legibilidad en pantallas pequeñas */
        --leading-normal: 1.6;   /* Más espaciado en móvil pequeño */
        --leading-relaxed: 1.7;
    }
}

/**
 * TABLET - Tamaños intermedios
 */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        /* Tamaños ligeramente reducidos para tablets */
        --text-5xl: 2.625rem;    /* 42px en tablet (entre móvil y desktop) */
        --text-4xl: 2rem;        /* 32px en tablet */
        --text-3xl: 1.75rem;     /* 28px en tablet */
    }
}

/**
 * DESKTOP GRANDE - Opcional: aumentar tamaños en pantallas muy grandes
 */
@media (min-width: 1536px) {
    :root {
        /* En pantallas muy grandes, podemos aumentar ligeramente */
        --text-base: 1.0625rem;  /* 17px en desktop grande */
        --text-lg: 1.1875rem;    /* 19px en desktop grande */
    }
}

/* ========================================
   MODO OSCURO (Opcional - Futuro)
   Preparación para dark mode
   ======================================== */

/*
@media (prefers-color-scheme: dark) {
    :root {
        --color-text: #ecf0f1;
        --color-gray: #34495e;
    }
}
*/

/**
 * NOTAS DE USO:
 *
 * 1. Siempre usar variables en lugar de valores hardcoded
 * 2. Preferir rem sobre px para tipografía (accesibilidad)
 * 3. Line-heights sin unidades (escalan automáticamente)
 * 4. Evitar !important (usar especificidad adecuada)
 * 5. Consultar STYLE-GUIDE.md para ejemplos y mejores prácticas
 *
 * EJEMPLO DE USO:
 *
 * .my-component {
 *     font-family: var(--font-primary);
 *     font-size: var(--text-lg);
 *     font-weight: var(--font-semibold);
 *     line-height: var(--leading-normal);
 *     color: var(--color-text);
 *     padding: var(--space-4);
 *     border-radius: var(--radius-md);
 *     box-shadow: var(--shadow-sm);
 *     transition: all var(--transition-base) var(--easing-ease-out);
 * }
 *
 * .my-button {
 *     background: var(--color-blue);
 *     font-size: var(--text-base);
 *     font-weight: var(--font-semibold);
 *     padding: var(--space-3) var(--space-6);
 *     border-radius: var(--radius-md);
 *     letter-spacing: var(--tracking-wide);
 * }
 */