/**
 * Variables CSS Globales
 * Tema: IAGT Classic Child
 * PrestaShop 8.2
 */

:root {
   /* ============================================
     COLORES DE MARCA
     ============================================ */

   /* Primarios */
   --recoautos-primary: #41A10F;
   --recoautos-primary-dark: #6fa03d;
   --recoautos-primary-light: #98F060;
   --recoautos-primary-lighter: #b5e089;
   --recoautos-closer: #05222A;
   --recoautos-button-text: #3F923D;

   /* Neutros */
   --color-text: #05222A;
   --color-text-secondary: #666666;
   --color-text-tertiary: #999999;
   --color-text-disabled: #cccccc;
   --color-text-subtext: #A3A3A3;

   --color-bg: #ffffff;
   --color-bg-secondary: #f9f9f9;
   --color-bg-tertiary: #f5f5f5;
   --color-bg-hover: #f0f0f0;

   /* Bordes */
   --color-border: #e0e0e0;
   --color-border-light: #f0f0f0;
   --color-border-dark: #cccccc;

   /* Estados */
   --color-success: #28a745;
   --color-error: #dc3545;
   --color-warning: #ffc107;
   --color-info: #17a2b8;

   /* ============================================
     ESPACIADO
     ============================================ */

   --space-xs: 4px;
   --space-sm: 8px;
   --space-md: 12px;
   --space-lg: 16px;
   --space-xl: 20px;
   --space-2xl: 24px;
   --space-2-5xl: 28px;
   --space-3xl: 32px;
   --space-4xl: 40px;

   /* ============================================
     TIPOGRAFÍA
     ============================================ */

   --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

   --font-size-xs: 12px;
   --font-size-sm: 14px;
   --font-size-base: 16px;
   --font-size-lg: 18px;
   --font-size-xl: 20px;
   --font-size-2xl: 24px;
   --font-size-3xl: 30px;
   --font-size-4xl: 32px;

   --font-weight-light: 300;
   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;

   --line-height-tight: 1.2;
   --line-height-normal: 1.5;
   --line-height-relaxed: 1.75;

   /* ============================================
     BORDES Y SOMBRAS
     ============================================ */

   --border-radius-sm: 4px;
   --border-radius-md: 8px;
   --border-radius-lg: 12px;
   --border-radius-xl: 16px;
   --border-radius-full: 9999px;

   --border-width-thin: 1px;
   --border-width-medium: 2px;
   --border-width-thick: 3px;

   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
   --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

   /* ============================================
     TRANSICIONES
     ============================================ */

   --transition-fast: 150ms ease;
   --transition-base: 250ms ease;
   --transition-slow: 350ms ease;

   --transition-all: all var(--transition-base);
   --transition-color: color var(--transition-base);
   --transition-background: background-color var(--transition-base);
   --transition-transform: transform var(--transition-base);

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

   --z-header: 1000;
   --z-dropdown: 1010;
   --z-sticky: 1020;
   --z-modal-backdrop: 1040;
   --z-modal: 1050;
   --z-popover: 1060;
   --z-tooltip: 1070;
   --z-notification: 1080;

   /* ============================================
     LAYOUT
     ============================================ */

   --container-max-width: 1320px;
   --header-height: 80px;
   --header-height-mobile: 60px;

   /* ============================================
     CART
     ============================================ */

     --cart-width: 360px;

   /* ============================================
     MENÚ HAMBURGUESA (UNIFICADO)
     ============================================ */

   --menu-mobile-width: 328px;
   --cart-modal-width: 360px; 
   /* Ancho base para desktop */
   --menu-bg: var(--color-bg);
   --menu-overlay-bg: rgba(0, 0, 0, 0.5);

   --menu-link-padding-y: var(--space-md);
   --menu-link-padding-x: var(--space-xl);

   --menu-icon-size: 24px;
   --menu-icon-margin: var(--space-lg);

   --menu-category-padding: var(--space-lg) 0;
   --menu-subcategory-indent: var(--space-xl);
}

/* ============================================
   TEMA OSCURO (Opcional)
   ============================================ */

@media (prefers-color-scheme: dark) {
   :root {
      /* Descomentar cuando se implemente
    --color-text: #f0f0f0;
    --color-text-secondary: #cccccc;
    --color-bg: #1a1a1a;
    --color-bg-secondary: #2a2a2a;
    --color-border: #404040;
    --menu-overlay-bg: rgba(0, 0, 0, 0.8);
    */
   }
}