/* ============================================
   MANYBOXENVIOX - DESIGN TOKENS
   Sistema de diseño minimalista y moderno
   ============================================ */

:root {
  /* ===== PALETA DE COLORES PREMIUM 3D ===== */

  /* Primarios */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-deep-blue: #0A1A3A;
  --color-bright-blue: #1976FF;
  --color-orange: #FF7A00;

  /* Grises Premium */
  --color-gray-50: #F8F9FA;
  --color-gray-100: #F1F3F5;
  --color-gray-200: #E9ECEF;
  --color-gray-300: #DEE2E6;
  --color-gray-400: #ADB5BD;
  --color-gray-500: #6C757D;
  --color-gray-600: #495057;
  --color-gray-700: #343A40;
  --color-gray-800: #212529;
  --color-gray-900: #0A0E13;

  /* Semánticos */
  --color-primary: var(--color-bright-blue);
  --color-accent: var(--color-orange);
  --color-text-primary: var(--color-black);
  --color-text-secondary: var(--color-gray-600);
  --color-text-inverse: var(--color-white);
  --color-background: var(--color-white);
  --color-background-dark: var(--color-deep-blue);
  --color-background-alt: var(--color-gray-50);
  --color-border: var(--color-gray-300);

  /* Estados */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: var(--color-bright-blue);

  /* Transparencias */
  --color-black-alpha-10: rgba(0, 0, 0, 0.1);
  --color-black-alpha-20: rgba(0, 0, 0, 0.2);
  --color-white-alpha-10: rgba(255, 255, 255, 0.1);
  --color-white-alpha-20: rgba(255, 255, 255, 0.2);
  --color-blue-alpha-10: rgba(25, 118, 255, 0.1);
  --color-orange-alpha-30: rgba(255, 122, 0, 0.3);

  /* ===== EFECTOS 3D Y PROFUNDIDAD ===== */

  /* Sombras Neumórficas */
  --shadow-neumorphic-sm:
    6px 6px 12px rgba(0, 0, 0, 0.1),
    -6px -6px 12px rgba(255, 255, 255, 0.9);
  --shadow-neumorphic-md:
    12px 12px 24px rgba(0, 0, 0, 0.1),
    -12px -12px 24px rgba(255, 255, 255, 0.9);
  --shadow-neumorphic-lg:
    20px 20px 40px rgba(0, 0, 0, 0.12),
    -20px -20px 40px rgba(255, 255, 255, 0.95);
  --shadow-neumorphic-inset:
    inset 6px 6px 12px rgba(0, 0, 0, 0.1),
    inset -6px -6px 12px rgba(255, 255, 255, 0.9);

  /* Sombras 3D Elevadas */
  --shadow-3d-sm:
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-3d-md:
    0 10px 25px rgba(0, 0, 0, 0.12),
    0 6px 12px rgba(0, 0, 0, 0.08);
  --shadow-3d-lg:
    0 20px 50px rgba(0, 0, 0, 0.15),
    0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-3d-xl:
    0 30px 70px rgba(0, 0, 0, 0.2),
    0 15px 35px rgba(0, 0, 0, 0.12);

  /* Efectos de Brillo (Glow) */
  --glow-primary: 0 0 30px rgba(25, 118, 255, 0.4);
  --glow-primary-strong: 0 0 50px rgba(25, 118, 255, 0.6);
  --glow-accent: 0 0 30px rgba(255, 122, 0, 0.4);
  --glow-accent-strong: 0 0 50px rgba(255, 122, 0, 0.6);
  --glow-white: 0 0 20px rgba(255, 255, 255, 0.3);

  /* Gradientes Premium */
  --gradient-hero: linear-gradient(135deg, #0A1A3A 0%, #1976FF 100%);
  --gradient-hero-alt: linear-gradient(135deg, #1976FF 0%, #FF7A00 100%);
  --gradient-card: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  --gradient-card-dark: linear-gradient(145deg, #0A1A3A 0%, #162544 100%);
  --gradient-glow-radial: radial-gradient(circle at center, rgba(25, 118, 255, 0.2) 0%, transparent 70%);
  --gradient-shimmer: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);

  /* Glassmorphism */
  --glass-blur: blur(20px);
  --glass-blur-strong: blur(40px);
  --glass-background: rgba(255, 255, 255, 0.1);
  --glass-background-dark: rgba(10, 26, 58, 0.3);
  --glass-border: 1px solid rgba(255, 255, 255, 0.2);

  /* Transformaciones 3D */
  --perspective: 1000px;
  --transform-lift-sm: translateY(-4px) translateZ(10px);
  --transform-lift-md: translateY(-8px) translateZ(20px);
  --transform-lift-lg: translateY(-12px) translateZ(30px);
  --transform-press: translateY(2px) scale(0.98);
  --transform-rotate-subtle: rotateY(5deg);
  --transform-tilt: rotateX(5deg) rotateY(5deg);

  /* ===== TIPOGRAFÍA ===== */

  /* Familias */
  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

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

  /* Pesos */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ===== ESPACIADO ===== */

  --spacing-1: 0.25rem;
  /* 4px */
  --spacing-2: 0.5rem;
  /* 8px */
  --spacing-3: 0.75rem;
  /* 12px */
  --spacing-4: 1rem;
  /* 16px */
  --spacing-5: 1.25rem;
  /* 20px */
  --spacing-6: 1.5rem;
  /* 24px */
  --spacing-8: 2rem;
  /* 32px */
  --spacing-10: 2.5rem;
  /* 40px */
  --spacing-12: 3rem;
  /* 48px */
  --spacing-16: 4rem;
  /* 64px */
  --spacing-20: 5rem;
  /* 80px */
  --spacing-24: 6rem;
  /* 96px */
  --spacing-32: 8rem;
  /* 128px */

  /* ===== SOMBRAS ===== */

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* ===== BORDES ===== */

  --border-width: 1px;
  --border-width-thick: 2px;

  --border-radius-sm: 0.25rem;
  /* 4px */
  --border-radius-md: 0.5rem;
  /* 8px */
  --border-radius-lg: 1rem;
  /* 16px */
  --border-radius-xl: 1.5rem;
  /* 24px */
  --border-radius-full: 9999px;

  /* ===== TRANSICIONES ===== */

  --transition-fast: 150ms;
  --transition-base: 250ms;
  --transition-slow: 350ms;

  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-timing-in: cubic-bezier(0.4, 0, 1, 1);
  --transition-timing-out: cubic-bezier(0, 0, 0.2, 1);

  /* ===== Z-INDEX ===== */

  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-navbar: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ===== BREAKPOINTS (para referencia en JS) ===== */

  --breakpoint-mobile: 640px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1280px;

  /* ===== LAYOUT ===== */

  --container-max-width: 1280px;
  --navbar-height: 70px;
  --content-padding: var(--spacing-4);
}

/* ===== RESPONSIVE OVERRIDES ===== */

@media (min-width: 768px) {
  :root {
    --content-padding: var(--spacing-8);
  }
}

@media (min-width: 1024px) {
  :root {
    --content-padding: var(--spacing-12);
  }
}