/**
 * VOLAROA DESIGN TOKENS
 * Sistema dual de colores: User (Emocional) & Pro (Austera)
 * Actualizado: mayo 2026
 */

/* ============================================
   BASE: Variables raíz (siempre disponibles)
   ============================================ */
:root {
  /* MODO USER - PALETA EMOCIONAL */
  --vl-user-bg-primary: #2A2640;
  --vl-user-bg-secondary: #332F4D;
  --vl-user-blue: #6EA8FF;
  --vl-user-violet: #A78BFA;
  --vl-user-pink: #F7A8D0;
  --vl-user-text-primary: #FFFFFF;
  --vl-user-text-secondary: #D6D1E8;
  --vl-user-text-tertiary: #A89FB8;

  /* MODO PRO - PALETA AUSTERA */
  --vl-pro-bg-primary: #F7F7FA;
  --vl-pro-bg-secondary: #FFFFFF;
  --vl-pro-border: #E5E5EE;
  --vl-pro-text-primary: #1A1A1A;
  --vl-pro-text-secondary: #4A4A4A;
  --vl-pro-text-tertiary: #7A7A8E;
  --vl-pro-accent: #4C6FFF;

  /* COLORES COMPARTIDOS - FEEDBACK */
  --vl-success: #10B981;
  --vl-warning: #F59E0B;
  --vl-error: #EF4444;
  --vl-info: #3B82F6;

  /* ESPACIADO - 8px base (4:6:8:12:16:24:32:48:64) */
  --vl-spacing-xs: 0.25rem; /* 4px */
  --vl-spacing-sm: 0.5rem; /* 8px */
  --vl-spacing-md: 1rem; /* 16px */
  --vl-spacing-lg: 1.5rem; /* 24px */
  --vl-spacing-xl: 2rem; /* 32px */
  --vl-spacing-2xl: 3rem; /* 48px */
  --vl-spacing-3xl: 4rem; /* 64px */

  /* TIPOGRAFÍA - ESCALA FLEXIBLE */
  --vl-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --vl-font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas,
    "Courier New", monospace;

  /* FONT SIZES */
  --vl-font-size-xs: 0.75rem; /* 12px */
  --vl-font-size-sm: 0.875rem; /* 14px */
  --vl-font-size-base: 1rem; /* 16px */
  --vl-font-size-lg: 1.125rem; /* 18px */
  --vl-font-size-xl: 1.25rem; /* 20px */
  --vl-font-size-2xl: 1.5rem; /* 24px */
  --vl-font-size-3xl: 1.875rem; /* 30px */
  --vl-font-size-4xl: 2.25rem; /* 36px */

  /* FONT WEIGHTS */
  --vl-font-weight-light: 300;
  --vl-font-weight-normal: 400;
  --vl-font-weight-medium: 500;
  --vl-font-weight-semibold: 600;
  --vl-font-weight-bold: 700;

  /* LINE HEIGHTS */
  --vl-line-height-tight: 1.2;
  --vl-line-height-snug: 1.375;
  --vl-line-height-normal: 1.5;
  --vl-line-height-relaxed: 1.625;
  --vl-line-height-loose: 2;

  /* BORDES & RADIOS */
  --vl-border-radius-none: 0;
  --vl-border-radius-sm: 0.25rem; /* 4px */
  --vl-border-radius-md: 0.5rem; /* 8px */
  --vl-border-radius-lg: 1rem; /* 16px */
  --vl-border-radius-xl: 1.5rem; /* 24px */
  --vl-border-radius-full: 9999px;

  --vl-border-width-thin: 1px;
  --vl-border-width-normal: 2px;
  --vl-border-width-thick: 3px;

  /* SOMBRAS */
  --vl-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --vl-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --vl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --vl-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --vl-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* SOMBRAS EMOCIONALES (USER MODE) */
  --vl-shadow-user-sm: 0 2px 8px rgba(167, 139, 250, 0.15);
  --vl-shadow-user-md: 0 8px 16px rgba(247, 168, 208, 0.2);
  --vl-shadow-user-lg: 0 12px 24px rgba(110, 168, 255, 0.25);

  /* SOMBRAS PROFESIONALES (PRO MODE) */
  --vl-shadow-pro-sm: 0 1px 3px rgba(26, 26, 26, 0.08);
  --vl-shadow-pro-md: 0 4px 12px rgba(26, 26, 26, 0.12);
  --vl-shadow-pro-lg: 0 8px 20px rgba(26, 26, 26, 0.16);

  /* TRANSICIONES */
  --vl-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --vl-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --vl-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* OPACIDADES */
  --vl-opacity-0: 0;
  --vl-opacity-10: 0.1;
  --vl-opacity-20: 0.2;
  --vl-opacity-30: 0.3;
  --vl-opacity-40: 0.4;
  --vl-opacity-50: 0.5;
  --vl-opacity-60: 0.6;
  --vl-opacity-70: 0.7;
  --vl-opacity-80: 0.8;
  --vl-opacity-90: 0.9;
  --vl-opacity-100: 1;

  /* Z-INDEXES */
  --vl-z-hide: -1;
  --vl-z-base: 0;
  --vl-z-docked: 10;
  --vl-z-dropdown: 1000;
  --vl-z-sticky: 1100;
  --vl-z-fixed: 1200;
  --vl-z-backdrop: 1300;
  --vl-z-offcanvas: 1400;
  --vl-z-modal: 1500;
  --vl-z-popover: 1600;
  --vl-z-tooltip: 1700;
}

/* ============================================
   TEMA USER - EMOCIONAL & SENSORIAL
   ============================================ */
:root[data-vl-theme="user"],
[data-vl-theme="user"] {
  color-scheme: dark;

  /* FONDOS */
  --vl-bg-primary: var(--vl-user-bg-primary);
  --vl-bg-secondary: var(--vl-user-bg-secondary);
  --vl-bg-tertiary: #3A3657;
  --vl-bg-overlay: rgba(42, 38, 64, 0.8);

  /* COLORES PRINCIPALES */
  --vl-color-primary: var(--vl-user-blue);
  --vl-color-secondary: var(--vl-user-violet);
  --vl-color-accent: var(--vl-user-pink);

  /* TEXTO */
  --vl-text-primary: var(--vl-user-text-primary);
  --vl-text-secondary: var(--vl-user-text-secondary);
  --vl-text-tertiary: var(--vl-user-text-tertiary);

  /* BORDES */
  --vl-border-color: rgba(255, 255, 255, 0.1);
  --vl-border-color-light: rgba(255, 255, 255, 0.05);
  --vl-border-color-strong: rgba(255, 255, 255, 0.2);

  /* SOMBRAS */
  --vl-shadow-sm: var(--vl-shadow-user-sm);
  --vl-shadow-md: var(--vl-shadow-user-md);
  --vl-shadow-lg: var(--vl-shadow-user-lg);

  /* INTERACTIVIDAD */
  --vl-hover-opacity: 0.8;
  --vl-active-opacity: 0.7;
  --vl-disabled-opacity: 0.5;

  /* GRADIENTES */
  --vl-gradient-primary: linear-gradient(135deg, var(--vl-user-blue) 0%, var(--vl-user-violet) 100%);
  --vl-gradient-secondary: linear-gradient(135deg, var(--vl-user-violet) 0%, var(--vl-user-pink) 100%);
  --vl-gradient-warm: linear-gradient(135deg, var(--vl-user-pink) 0%, #FF9E64 100%);
}

/* ============================================
   TEMA PRO - AUSTERA & PROFESIONAL
   ============================================ */
:root[data-vl-theme="pro"],
[data-vl-theme="pro"] {
  color-scheme: light;

  /* FONDOS */
  --vl-bg-primary: var(--vl-pro-bg-primary);
  --vl-bg-secondary: var(--vl-pro-bg-secondary);
  --vl-bg-tertiary: #EFEFF5;
  --vl-bg-overlay: rgba(26, 26, 26, 0.7);

  /* COLORES PRINCIPALES */
  --vl-color-primary: var(--vl-pro-accent);
  --vl-color-secondary: #6B7280;
  --vl-color-accent: #EC4899;

  /* TEXTO */
  --vl-text-primary: var(--vl-pro-text-primary);
  --vl-text-secondary: var(--vl-pro-text-secondary);
  --vl-text-tertiary: var(--vl-pro-text-tertiary);

  /* BORDES */
  --vl-border-color: var(--vl-pro-border);
  --vl-border-color-light: #F0F0F5;
  --vl-border-color-strong: #D5D5DE;

  /* SOMBRAS */
  --vl-shadow-sm: var(--vl-shadow-pro-sm);
  --vl-shadow-md: var(--vl-shadow-pro-md);
  --vl-shadow-lg: var(--vl-shadow-pro-lg);

  /* INTERACTIVIDAD */
  --vl-hover-opacity: 0.95;
  --vl-active-opacity: 0.9;
  --vl-disabled-opacity: 0.6;

  /* GRADIENTES */
  --vl-gradient-primary: linear-gradient(135deg, #4C6FFF 0%, #6B7280 100%);
  --vl-gradient-secondary: linear-gradient(135deg, #EC4899 0%, #F97316 100%);
  --vl-gradient-warm: linear-gradient(135deg, #FCD34D 0%, #F97316 100%);
}

/* ============================================
   PREFIERE TEMA OSCURO DEL SISTEMA
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-vl-theme]) {
    --vl-theme: "user";
  }
}

/* ============================================
   PREFIERE TEMA CLARO DEL SISTEMA
   ============================================ */
@media (prefers-color-scheme: light) {
  :root:not([data-vl-theme]) {
    --vl-theme: "pro";
  }
}

/* ============================================
   UTILITY CLASSES - HELPERS
   ============================================ */

/* Textos */
.text-primary {
  color: var(--vl-text-primary);
}

.text-secondary {
  color: var(--vl-text-secondary);
}

.text-tertiary {
  color: var(--vl-text-tertiary);
}

/* Fondos */
.bg-primary {
  background-color: var(--vl-bg-primary);
}

.bg-secondary {
  background-color: var(--vl-bg-secondary);
}

.bg-tertiary {
  background-color: var(--vl-bg-tertiary);
}

/* Bordes */
.border-primary {
  border-color: var(--vl-border-color);
}

.border-light {
  border-color: var(--vl-border-color-light);
}

.border-strong {
  border-color: var(--vl-border-color-strong);
}

/* Sombras */
.shadow-user-sm {
  box-shadow: var(--vl-shadow-user-sm);
}

.shadow-user-md {
  box-shadow: var(--vl-shadow-user-md);
}

.shadow-user-lg {
  box-shadow: var(--vl-shadow-user-lg);
}

.shadow-pro-sm {
  box-shadow: var(--vl-shadow-pro-sm);
}

.shadow-pro-md {
  box-shadow: var(--vl-shadow-pro-md);
}

.shadow-pro-lg {
  box-shadow: var(--vl-shadow-pro-lg);
}

/* Gradientes */
.gradient-primary {
  background: var(--vl-gradient-primary);
}

.gradient-secondary {
  background: var(--vl-gradient-secondary);
}

.gradient-warm {
  background: var(--vl-gradient-warm);
}

/* Transiciones */
.transition-fast {
  transition: all var(--vl-transition-fast);
}

.transition-base {
  transition: all var(--vl-transition-base);
}

.transition-slow {
  transition: all var(--vl-transition-slow);
}