/* =========================================
   IMPERPRO - SISTEMA DE DISEÑO (DESIGN SYSTEM)
   Archivo: variables.css
   Descripción: Variables globales de colores, tipografía y espaciado
   ========================================= */

:root {
  /*  PALETA DE COLORES - Basados en el logo ImperPro */
  
  /* Colores Principales */
  --color-primary: #0F2C4A;        /* Azul Profundo - Logo, textos principales */
  --color-secondary: #00A8E8;      /* Azul Cian - Detalles, ola de pintura */
  --color-accent: #FF6B35;         /* Naranja - Botones de acción (CTA) */
  
  /* Colores Neutros */
  --color-white: #FFFFFF;          /* Blanco puro */
  --color-light: #F8F9FA;          /* Gris claro - Fondos alternos */
  --color-gray: #6C757D;           /* Gris pizarra - Textos secundarios */
  --color-dark: #212529;           /* Gris oscuro - Textos principales */
  
  /* Colores Funcionales */
  --color-whatsapp: #25D366;       /* Verde WhatsApp - Botón flotante */
  --color-whatsapp-dark: #128C7E;  /* Verde WhatsApp oscuro - Hover */
  --color-success: #28A745;        /* Verde éxito - Mensajes confirmación */
  --color-error: #DC3545;          /* Rojo error - Alertas */
  
  /* 📐 TIPOGRAFÍA */
  --font-heading: 'Montserrat', sans-serif;    /* Títulos (H1, H2, H3) */
  --font-body: 'Roboto', sans-serif;           /* Cuerpo de texto (párrafos) */
  
  /* 🔠 TAMAÑOS DE FUENTE */
  --text-xs: 0.75rem;        /* 12px */
  --text-sm: 0.875rem;       /* 14px */
  --text-base: 1rem;         /* 16px */
  --text-lg: 1.125rem;       /* 18px */
  --text-xl: 1.25rem;        /* 20px */
  --text-2xl: 1.5rem;        /* 24px */
  --text-3xl: 1.875rem;      /* 30px */
  --text-4xl: 2.25rem;       /* 36px */
  
  /* 📏 ESPACIADO (Padding y Margin) */
  --spacing-xs: 0.25rem;     /* 4px */
  --spacing-sm: 0.5rem;      /* 8px */
  --spacing-md: 1rem;        /* 16px */
  --spacing-lg: 1.5rem;      /* 24px */
  --spacing-xl: 2rem;        /* 32px */
  --spacing-2xl: 3rem;       /* 48px */
  --spacing-3xl: 4rem;       /* 64px */
  
  /* 🎯 SOMBRAS */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* 🔄 TRANSICIONES */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* 📐 BORDES REDONDEADOS */
  --radius-sm: 0.25rem;      /* 4px */
  --radius-md: 0.5rem;       /* 8px */
  --radius-lg: 1rem;         /* 16px */
  --radius-full: 9999px;     /* Círculo perfecto */
  
  /* 📱 BREAKPOINTS (Para responsive) */
  --breakpoint-sm: 640px;    /* Móviles grandes */
  --breakpoint-md: 768px;    /* Tablets */
  --breakpoint-lg: 1024px;   /* Laptops */
  --breakpoint-xl: 1280px;   /* Desktops */
}

/* =========================================
   CLASES DE UTILIDAD RÁPIDA
   (Para usar directamente en el HTML)
   ========================================= */

/* Colores de texto */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.text-gray { color: var(--color-gray); }
.text-white { color: var(--color-white); }

/* Colores de fondo */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-light { background-color: var(--color-light); }
.bg-white { background-color: var(--color-white); }

/* Tamaños de fuente */
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }

/* Espaciado */
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }