/* 
==============================================
   BAJAJ CARRERA MOTOS - SISTEMA DE DISEÑO
   Variables unificadas para todo el sitio
==============================================
*/

:root {
  /* Colores principales */
  --clr-primary: #e02b20;         /* Rojo Bajaj */
  --clr-primary-hover: #b01e15;   /* Rojo Bajaj (hover) */
  --clr-secondary: #00204A;       /* Azul oscuro */
  --clr-secondary-hover: #003270; /* Azul oscuro (hover) */
  --clr-dark: #222;               /* Casi negro */
  --clr-light: #ffffff;           /* Blanco */
  --clr-accent: #e02b20;          /* Acento (mismo que primary para consistencia) */
  
  /* Gradientes */
  --gradient-red: linear-gradient(180deg, #ff0000 0%, #d61d1d 100%);
  --gradient-hero: linear-gradient(to right, var(--clr-secondary) 0%, rgba(0,0,0,0.7) 100%);
  --gradient-cta: linear-gradient(90deg, var(--clr-primary), #ff4757);
  
  /* Texto */
  --text-primary: var(--clr-primary);
  --text-secondary: var(--clr-secondary);
  --text-dark: #1a1a1a;
  --text-light: #ffffff;
  --text-muted: #575757;
  
  /* Fondos */
  --background-primary: var(--clr-primary);
  --background-secondary: var(--clr-secondary);
  --background-light: #ffffff;
  --background-dark: var(--clr-dark);
  --background-grey: #f5f5f5;
  
  /* Tipografía */
  --font-main: "Montserrat", sans-serif;
  --font-heading: "Montserrat", sans-serif;
  
  /* Espaciado */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  
  /* Bordes */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-pill: 50px;
  
  /* Sombras */
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --shadow-btn: 0 6px 20px rgba(224, 43, 32, 0.3);
  
  /* Tamaños de contenedor */
  --container-width: 95%;
  --container-max-width: 1400px;
  --section-max-width: 1200px;
  
  /* Transiciones */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* 
==============================================
   CLASES UTILITARIAS DE USO GLOBAL
   Para aplicar estilos rápidamente en HTML
==============================================
*/

/* Fondos */
.bg-primary { background: var(--clr-primary) !important; }
.bg-secondary { background: var(--clr-secondary) !important; }
.bg-dark { background: var(--clr-dark) !important; }
.bg-light { background: var(--clr-light) !important; }
.bg-grey { background: var(--background-grey) !important; }
.bg-gradient-red { background: var(--gradient-red) !important; }
.bg-gradient-hero { background: var(--gradient-hero) !important; }
.bg-gradient-cta { background: var(--gradient-cta) !important; }

/* Textos */
.text-primary { color: var(--clr-primary) !important; }
.text-secondary { color: var(--clr-secondary) !important; }
.text-dark { color: var(--clr-dark) !important; }
.text-light { color: var(--clr-light) !important; }
.text-red { color: #b01e15 !important; /* Darker red for better contrast on white backgrounds */ }
.text-muted { color: var(--text-muted) !important; }

/* Bordes */
.border-primary { border-color: var(--clr-primary) !important; }
.border-secondary { border-color: var(--clr-secondary) !important; }
.border-light { border-color: var(--clr-light) !important; }
.border-dark { border-color: var(--clr-dark) !important; }

/* Espaciado */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: var(--spacing-xs) !important; }
.mt-2 { margin-top: var(--spacing-sm) !important; }
.mt-3 { margin-top: var(--spacing-md) !important; }
.mt-4 { margin-top: var(--spacing-lg) !important; }
.mt-5 { margin-top: var(--spacing-xl) !important; }
.mb-1 { margin-bottom: var(--spacing-xs) !important; }
.mb-2 { margin-bottom: var(--spacing-sm) !important; }
.mb-3 { margin-bottom: var(--spacing-md) !important; }
.mb-4 { margin-bottom: var(--spacing-lg) !important; }
.mb-5 { margin-bottom: var(--spacing-xl) !important; }
.p-0 { padding: 0 !important; }
.p-1 { padding: var(--spacing-xs) !important; }
.p-2 { padding: var(--spacing-sm) !important; }
.p-3 { padding: var(--spacing-md) !important; }
.p-4 { padding: var(--spacing-lg) !important; }
.p-5 { padding: var(--spacing-xl) !important; }

/* Alineación */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.flex-center { display: flex !important; align-items: center !important; justify-content: center !important; }

/* Display */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }

/* Otros */
.rounded-sm { border-radius: var(--border-radius-sm) !important; }
.rounded-md { border-radius: var(--border-radius-md) !important; }
.rounded-lg { border-radius: var(--border-radius-lg) !important; }
.rounded-pill { border-radius: var(--border-radius-pill) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }