/* ═════════════════════════════════════════════════════════════
   VARIABLES CSS - Design System
   
   Define todos los tokens de diseño reutilizables:
   - Colores principales y secundarios
   - Espaciado y tamaños
   - Sombras
   - Radio de bordes
   - Tipografía
═════════════════════════════════════════════════════════════ */

:root {
  /* ── COLORES PRINCIPALES ── */
  --primary: #1a3a5c;
  --primary-light: #2a5a8c;
  --primary-dark: #0f2a42;
  
  /* ── COLORES SECUNDARIOS ── */
  --secondary: #F97316;
  --secondary-dark: #EA580C;
  
  /* ── ESTADOS Y FEEDBACK ── */
  --success: #10B981;
  --success-light: #D1FAE5;
  --warning: #F59E0B;
  --warning-light: #FEF3C7;
  --danger: #EF4444;
  --info: #06B6D4;
  --info-light: #CFFAFE;
  
  /* ── ESCALA DE GRISES ── */
  --gray-50: #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  
  /* ── MARCAS/BRANDS ── */
  --mopi-primary: #14B8A6;
  --mopi-secondary: #5EEAD4;
  --whiteclub-blue: #3B82F6;
  
  /* ── DIMENSIONES ── */
  --radius: 14px;
  --radius-sm: 10px;
  
  /* ── SOMBRAS ── */
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
}