/**
 * GRUPO VÍA MOTOS - Variables CSS Multimarca
 * 
 * Sistema de variables CSS para las 4 marcas:
 * - KTM (Naranja #FF6600 - Deportividad y energía)
 * - Husqvarna (Azul #00A0E3 + Amarillo #FFC700 - Identidad nórdica)
 * - Honda (Rojo #E31E24 - Deportividad y pasión)
 * - AKT (Azul #003DA5 - Aventura americana)
 * 
 * Colores Base:
 * - Negro (#000000) - Elegancia y deportividad
 * - Blanco (#FFFFFF) - Limpieza visual
 * - Gris Oscuro (#1E1E1E / #2B2B2B) - Secciones premium
 * 
 * @version 1.1
 * @date Diciembre 2024
 */

:root {
    /* ============================================
       COLORES BASE
       ============================================ */
    
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-gray-dark: #1E1E1E;
    --color-gray-dark-alt: #2B2B2B;
    
    /* ============================================
       COLORES CORPORATIVOS - Minimalist (Por defecto)
       ============================================ */
    
    --color-primary: #000000;
    --color-primary-dark: #1a1a1a;
    --color-primary-light: #333333;
    --color-secondary: #ffffff;
    --color-secondary-dark: #f5f5f5;
    --color-secondary-light: #fafafa;
    
    /* Colores de marca como acentos */
    --color-accent-ktm: #FF6600;
    --color-accent-husqvarna: #00A0E3;
    --color-accent-honda: #E31E24;
    --color-accent-akt: #003DA5;
    
    /* ============================================
       COLORES NEUTROS Y FUNCIONALES
       ============================================ */
    
    --color-text-primary: #333333;
    --color-text-primary-alt: #1A1A1A;
    --color-text-secondary: #666666;
    --color-text-secondary-alt: #757575;
    
    --color-bg-light: #FFFFFF;
    --color-bg-light-alt: #F5F5F5;
    --color-bg-dark: #000000;
    --color-bg-dark-alt: #1E1E1E;
    
    --color-link: #000000;
    --color-link-hover: #333333;
    
    /* Grises adicionales para UI - Minimalist */
    --color-gray-50: #fafafa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e5e5e5;
    --color-gray-300: #d4d4d4;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-gray-900: #111827;
    
    /* ============================================
       COLORES DE ESTADO
       ============================================ */
    
    --color-success: #10B981;
    --color-success-light: #D1FAE5;
    --color-warning: #F59E0B;
    --color-warning-light: #FEF3C7;
    --color-error: #EF4444;
    --color-error-light: #FEE2E2;
    --color-info: #3B82F6;
    --color-info-light: #DBEAFE;
    
    /* ============================================
       TIPOGRAFÍA
       ============================================ */
    
    /* Familias de fuentes - Minimalist */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Courier New', monospace;
    
    /* Tamaños de fuente - Escala modular (1.250 - Major Third) */
    --font-size-xs: 0.64rem;      /* 10.24px */
    --font-size-sm: 0.8rem;       /* 12.8px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.25rem;      /* 20px */
    --font-size-xl: 1.563rem;     /* 25px */
    --font-size-2xl: 1.953rem;    /* 31.25px */
    --font-size-3xl: 2.441rem;    /* 39px */
    --font-size-4xl: 3.052rem;    /* 48.83px */
    --font-size-5xl: 3.815rem;    /* 61px */
    
    /* Pesos de fuente */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Line heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;
    
    /* Letter spacing */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    
    /* ============================================
       ESPACIADO - Sistema de 8px
       ============================================ */
    
    --space-0: 0;
    --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 */
    --space-32: 8rem;     /* 128px */
    
    /* ============================================
       BORDES Y RADIOS
       ============================================ */
    
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 4px;
    
    --border-radius-none: 0;
    --border-radius-sm: 0.25rem;   /* 4px */
    --border-radius-md: 0.375rem;  /* 6px */
    --border-radius-lg: 0.5rem;    /* 8px */
    --border-radius-xl: 0.75rem;   /* 12px */
    --border-radius-2xl: 1rem;     /* 16px */
    --border-radius-full: 9999px;
    
    /* ============================================
       SOMBRAS - Minimalist (más sutiles)
       ============================================ */
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    --shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.08);
    --shadow-2xl: 0 16px 48px rgba(0, 0, 0, 0.1);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.04);
    
    /* ============================================
       TRANSICIONES
       ============================================ */
    
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
    
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ============================================
       Z-INDEX
       ============================================ */
    
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    
    /* ============================================
       BREAKPOINTS (para uso en JS)
       ============================================ */
    
    --breakpoint-xs: 0;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    
    /* ============================================
       CONTENEDORES
       ============================================ */
    
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    
    /* ============================================
       OPACIDADES
       ============================================ */
    
    --opacity-0: 0;
    --opacity-10: 0.1;
    --opacity-20: 0.2;
    --opacity-30: 0.3;
    --opacity-40: 0.4;
    --opacity-50: 0.5;
    --opacity-60: 0.6;
    --opacity-70: 0.7;
    --opacity-80: 0.8;
    --opacity-90: 0.9;
    --opacity-100: 1;
}

/* ============================================
   TEMA KTM - Naranja (#FF6600) como acento
   ============================================ */

[data-brand="ktm"] {
    --color-primary: #000000;
    --color-primary-dark: #1a1a1a;
    --color-primary-light: #333333;
    --color-secondary: #ffffff;
    --color-secondary-dark: #f5f5f5;
    --color-secondary-light: #fafafa;
    --color-accent: #FF6600;
    --color-accent-dark: #CC5200;
    --color-accent-light: #FF8533;
    --color-link: #000000;
    --color-link-hover: #FF6600;
}

/* ============================================
   TEMA HUSQVARNA - Azul (#00A0E3) y Amarillo (#FFC700) como acentos
   ============================================ */

[data-brand="husqvarna"] {
    --color-primary: #000000;
    --color-primary-dark: #1a1a1a;
    --color-primary-light: #333333;
    --color-secondary: #ffffff;
    --color-secondary-dark: #f5f5f5;
    --color-secondary-light: #fafafa;
    --color-accent: #00A0E3;
    --color-accent-dark: #0080B8;
    --color-accent-light: #33B3E8;
    --color-accent-secondary: #FFC700;
    --color-link: #000000;
    --color-link-hover: #00A0E3;
}

/* ============================================
   TEMA HONDA - Rojo (#E31E24) como acento
   ============================================ */

[data-brand="honda"] {
    --color-primary: #000000;
    --color-primary-dark: #1a1a1a;
    --color-primary-light: #333333;
    --color-secondary: #ffffff;
    --color-secondary-dark: #f5f5f5;
    --color-secondary-light: #fafafa;
    --color-accent: #E31E24;
    --color-accent-dark: #B5181D;
    --color-accent-light: #E84B50;
    --color-link: #000000;
    --color-link-hover: #E31E24;
}

/* ============================================
   TEMA AKT - Azul (#003DA5) como acento
   ============================================ */

[data-brand="akt"] {
    --color-primary: #000000;
    --color-primary-dark: #1a1a1a;
    --color-primary-light: #333333;
    --color-secondary: #ffffff;
    --color-secondary-dark: #f5f5f5;
    --color-secondary-light: #fafafa;
    --color-accent: #003DA5;
    --color-accent-dark: #003184;
    --color-accent-light: #3366B8;
    --color-link: #000000;
    --color-link-hover: #003DA5;
}

/* ============================================
   TEMA CORPORATIVO VÍA MOTOS - Minimalist
   ============================================ */

[data-brand="viamotos"] {
    --color-primary: #000000;
    --color-primary-dark: #1a1a1a;
    --color-primary-light: #333333;
    --color-secondary: #ffffff;
    --color-secondary-dark: #f5f5f5;
    --color-secondary-light: #fafafa;
    --color-accent: #FF6600;
    --color-accent-dark: #CC5200;
    --color-accent-light: #FF8533;
    --color-link: #000000;
    --color-link-hover: #333333;
}

/* ============================================
   MODO OSCURO (opcional)
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --color-gray-50: #111827;
        --color-gray-100: #1F2937;
        --color-gray-200: #374151;
        --color-gray-300: #4B5563;
        --color-gray-400: #6B7280;
        --color-gray-500: #9CA3AF;
        --color-gray-600: #D1D5DB;
        --color-gray-700: #E5E7EB;
        --color-gray-800: #F3F4F6;
        --color-gray-900: #F9FAFB;
    }
}

/* ============================================
   VARIABLES DE COMPONENTES ESPECÍFICOS
   ============================================ */

:root {
    /* Navbar */
    --navbar-height: 80px;
    --navbar-height-mobile: 64px;
    
    /* Footer */
    --footer-height: auto;
    
    /* Botones */
    --button-height-sm: 32px;
    --button-height-md: 40px;
    --button-height-lg: 48px;
    --button-height-xl: 56px;
    
    /* Inputs */
    --input-height-sm: 32px;
    --input-height-md: 40px;
    --input-height-lg: 48px;
    
    /* Cards */
    --card-padding: var(--space-6);
    --card-border-radius: var(--border-radius-lg);
}