/*
 * FOODPOSS - CSS Variables
 * Colores, spacing, tipografía y valores reutilizables
 */

:root {
    /* ========== COLORES ========== */
    /* Primarios */
    --color-primary: #4d9fff;
    --color-primary-dark: #2d7fff;
    --color-primary-light: #6db0ff;
    
    /* Neutros */
    --color-black: #000000;
    --color-dark: #070a12;
    --color-dark-2: #0d0d1a;
    --color-dark-3: #1a1a2e;
    --color-dark-4: #16213e;
    --color-gray-600: #64748b;
    --color-gray-500: #94a3b8;
    --color-gray-400: #94a3b8;
    --color-white: #ffffff;
    
    /* Acentos */
    --color-accent: #e94560;
    --color-accent-dark: #d63850;
    
    /* Fondos */
    --bg-dark: var(--color-dark);
    --bg-dark-2: var(--color-dark-2);
    --bg-dark-3: var(--color-dark-3);
    --bg-dark-4: var(--color-dark-4);
    --bg-white: var(--color-white);
    --bg-gray: #f5f5f5;
    
    /* Texto */
    --text-primary: var(--color-white);
    --text-secondary: var(--color-gray-500);
    --text-dark: #333333;
    --text-muted: #666666;
    
    /* ========== TIPOGRAFÍA ========== */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Poppins', var(--font-primary);
    
    /* Tamaños */
    --text-xs: 13px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 22px;
    --text-3xl: 28px;
    --text-4xl: 36px;
    --text-5xl: 42px;
    --text-6xl: 52px;
    
    /* ========== SPACING ========== */
    --space-1: 5px;
    --space-2: 10px;
    --space-3: 15px;
    --space-4: 20px;
    --space-5: 25px;
    --space-6: 30px;
    --space-8: 40px;
    --space-10: 50px;
    --space-12: 60px;
    --space-16: 80px;
    --space-20: 100px;
    --space-24: 120px;
    
    /* ========== BORDES ========== */
    --radius-sm: 3px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;
    
    /* ========== SOMBRAS ========== */
    --shadow-sm: 0 4px 15px rgba(77, 159, 255, 0.4);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 30px 60px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 50px 100px rgba(0, 0, 0, 0.9);
    
    /* ========== TRANSICIONES ========== */
    --transition-fast: 0.3s;
    --transition-normal: 0.5s;
    --transition-slow: 0.8s;
    
    /* ========== Z-INDEX ========== */
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-modal: 1000;
    --z-tooltip: 2000;
}