/* Variables de Diseño Premium - LoyalCardsEc */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  /* Paleta de Colores Base */
  --primary-color: #4F46E5;        /* Índigo Premium */
  --primary-dark-color: #3730A3;   /* Índigo Oscuro */
  --bg-color: #F8FAFC;             /* Fondo General */
  --surface-color: #FFFFFF;        /* Superficie Principal */
  --text-main: #0F172A;            /* Azul Noche */
  --text-muted: #64748B;           /* Gris Azulado */
  --accent-color: #14B8A6;         /* Turquesa */
  --success-color: #10B981;        /* Esmeralda */
  --warning-color: #F59E0B;        /* Ámbar */
  --danger-color: #EF4444;         /* Rojo */
  --border-color: #E2E8F0;         /* Gris Claro */

  /* Colores de Hover y Estados Activos */
  --primary-light: #EEF2FF;
  --accent-light: #F0FDFA;
  --success-light: #ECFDF5;
  --warning-light: #FFFBEB;
  --danger-light: #FEF2F2;

  /* Tipografías */
  --font-headings: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Sombras y Elevaciones (Premium Glassmorphism y Soft Shadows) */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
  --shadow-glow: 0 0 20px rgba(79, 70, 229, 0.15);

  /* Bordes y Radios */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Transiciones Suaves */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s ease;

  /* Z-Index */
  --z-back: -10;
  --z-normal: 1;
  --z-sticky: 100;
  --z-fixed: 200;
  --z-modal: 1000;
  --z-toast: 2000;
}