:root {
  /* =====================
     🎨 COLORES BASE - THE LUCKY STORE
     ===================== */

  --color-base: #ffffff;          /* Fondo general limpio */
  --color-deep: #f5f7fa;          /* Gris suave para contenedores y tarjetas */
  --color-footer: #0a0a0a;        /* Negro profundo para footer premium */
  --color-text: #0a0a0a;          /* Texto principal: negro profundo */
  --color-border: #e0e8f0;        /* Líneas suaves con toque azul */

  /* =====================
     🎯 COLORES DE MARCA - THE LUCKY STORE
     ===================== */

  --color-accent: #1565FF;        /* Azul eléctrico principal */
  --color-primary: #42E85A;       /* Verde Lucky para CTA y acciones */

  /* =====================
     ✅ COLORES DE ESTADO
     ===================== */

  --color-success: #42E85A;       /* Verde Lucky para éxito */
  --color-warning: #FF9F43;       /* Naranja cálido para advertencias */
  --color-danger:  #FF5252;       /* Rojo vibrante para errores */

  /* =====================
     ✍️ TIPOGRAFÍA - PREMIUM TECH
     ===================== */

  --font-main: 'Inter', 'Manrope', sans-serif;  /* Fuente moderna y tecnológica */

  /* =====================
     📏 BORDES Y RADIOS - MODERNOS
     ===================== */

  --radius-sm: 0.375rem;          /* Bordes discretos */
  --radius: 0.75rem;              /* Redondeo estándar moderno */
  --radius-lg: 1.25rem;           /* Redondeo amplio para cards premium */

  /* =====================
     🧱 SOMBRAS - PREMIUM
     ===================== */

  --shadow: 0 8px 24px rgba(21, 101, 255, 0.08); /* Sombra con toque azul */
  --shadow-lg: 0 12px 40px rgba(21, 101, 255, 0.12); /* Sombra más pronunciada */

  /* =====================
     📐 ESPACIADOS (MÁRGENES Y PADDINGS)
     ===================== */

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2.5rem;

  /* =====================
     🔠 TAMAÑOS DE TEXTO
     ===================== */

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 3rem;

  /* =====================
     🔄 TRANSICIONES Y ANIMACIONES
     ===================== */

  --transition-fast: 0.15s;
  --transition-base: 0.3s;
  --transition-slow: 0.6s;
}