/**
 * Design System - CSS Custom Properties
 * Tokenized system with light/dark theme support
 */

:root {
  /* Color Scheme */
  color-scheme: light dark;

  /* Typography Scale */
  --fuente-display: 'Space Grotesk', 'Manrope', system-ui, sans-serif;
  --fuente-sans: 'Inter', 'Manrope', system-ui, sans-serif;
  --fuente-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --texto-xxs: 0.75rem;
  /* 12px */
  --texto-xs: 0.8125rem;
  /* 13px */
  --texto-sm: 0.9375rem;
  /* 15px */
  --texto-md: 1rem;
  /* 16px */
  --texto-lg: 1.125rem;
  /* 18px */
  --texto-xl: 1.5rem;
  /* 24px */
  --texto-xxl: 2rem;
  /* 32px */
  --texto-xxxl: 2.5rem;
  /* 40px */

  --peso-fuente-normal: 400;
  --peso-fuente-medio: 500;
  --peso-fuente-seminegrita: 600;
  --peso-fuente-negrita: 700;

  --alto-linea-estrecho: 1.25;
  --alto-linea-normal: 1.5;
  --alto-linea-relajado: 1.625;

  --espaciado-letra-estrecho: -0.02em;
  --espaciado-letra-normal: 0;
  --espaciado-letra-amplio: 0.025em;
  --espaciado-letra-mas-amplio: 0.05em;

  /* Spacing Scale (4px base) */
  --espacio-0: 0;
  --espacio-1: 0.25rem;
  /* 4px */
  --espacio-2: 0.5rem;
  /* 8px */
  --espacio-3: 0.75rem;
  /* 12px */
  --espacio-4: 1rem;
  /* 16px */
  --espacio-5: 1.5rem;
  /* 24px */
  --espacio-6: 2rem;
  /* 32px */
  --espacio-7: 3rem;
  /* 48px */
  --espacio-8: 4rem;
  /* 64px */
  --espacio-9: 6rem;
  /* 96px */

  /* Border Radius */
  --radio-xs: 0.25rem;
  /* 4px */
  --radio-sm: 0.375rem;
  /* 6px */
  --radio-md: 0.5rem;
  /* 8px */
  --radio-lg: 0.75rem;
  /* 12px */
  --radio-xl: 1rem;
  /* 16px */
  --radio-2xl: 1.5rem;
  /* 24px */
  --radio-completo: 9999px;

  /* Shadows */
  --sombra-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --sombra-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --sombra-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --sombra-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --sombra-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --sombra-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --sombra-interior: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

  /* Z-Index Scale */
  --z-base: 0;
  --z-desplegable: 1000;
  --z-pegajoso: 1100;
  --z-fijo: 1200;
  --z-superposicion: 1300;
  --z-modal: 1400;
  --z-emergente: 1500;
  --z-ayuda: 1600;
  --z-notificacion: 1700;

  /* Transitions */
  --duracion-rapida: 150ms;
  --duracion-normal: 250ms;
  --duracion-lenta: 350ms;
  --duracion-mas-lenta: 500ms;

  --aceleracion-entrada: cubic-bezier(0.4, 0, 1, 1);
  --aceleracion-salida: cubic-bezier(0, 0, 0.2, 1);
  --aceleracion-entrada-salida: cubic-bezier(0.4, 0, 0.2, 1);
  --aceleracion-rebote: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --aceleracion-suave: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

/* Light Theme (Default) */
:root,
[data-theme='light'] {
  /* Primary Colors */
  --color-primario-50: #fff0e6;
  --color-primario-100: #ffd7bf;
  --color-primario-200: #ffb480;
  --color-primario-300: #ff9140;
  --color-primario-400: #ff7a1a;
  --color-primario-500: #ff6a00;
  --color-primario-600: #e85c00;
  --color-primario-700: #c74b00;
  --color-primario-800: #9b3a00;
  --color-primario-900: #6b2700;

  /* Accent Colors */
  --color-acento-50: #ffe9e9;
  --color-acento-100: #ffd0d0;
  --color-acento-200: #ffa3a3;
  --color-acento-300: #ff7676;
  --color-acento-400: #ff4d4d;
  --color-acento-500: #ff2d1a;
  --color-acento-600: #e61f10;
  --color-acento-700: #bf160b;
  --color-acento-800: #8f0f08;
  --color-acento-900: #5f0905;

  /* Neutral Colors */
  --color-neutro-50: #fafaf9;
  --color-neutro-100: #f5f5f4;
  --color-neutro-200: #e7e5e4;
  --color-neutro-300: #d6d3d1;
  --color-neutro-400: #a8a29e;
  --color-neutro-500: #78716c;
  --color-neutro-600: #57534e;
  --color-neutro-700: #44403c;
  --color-neutro-800: #292524;
  --color-neutro-900: #1c1917;

  /* Semantic Colors */
  --color-exito-50: #ecfdf5;
  --color-exito-500: #10b981;
  --color-exito-700: #047857;

  --color-advertencia-50: #fffbeb;
  --color-advertencia-500: #f59e0b;
  --color-advertencia-700: #b45309;

  --color-error-50: #fef2f2;
  --color-error-500: #ef4444;
  --color-error-700: #b91c1c;

  --color-informacion-50: #eff6ff;
  --color-informacion-500: #3b82f6;
  --color-informacion-700: #1d4ed8;

  /* Surface Colors */
  --superficie-base: #ffffff;
  --superficie-elevada: #ffffff;
  --superficie-superpuesta: #ffffff;
  --superficie-hundida: #f4f4f4;
  --superficie-sobrevuelo: #f8f8f8;
  --superficie-presionada: #ededed;

  /* Text Colors */
  --texto-principal: #0b0b0b;
  --texto-secundario: #2a2a2a;
  --texto-terciario: #4a4a4a;
  --texto-deshabilitado: #6d6d6d;
  --texto-inverso: #ffffff;
  --texto-enlace: var(--color-primario-600);
  --texto-enlace-sobrevuelo: var(--color-primario-700);

  /* Border Colors */
  --borde-sutil: rgba(0, 0, 0, 0.06);
  --borde-normal: rgba(0, 0, 0, 0.12);
  --borde-fuerte: rgba(0, 0, 0, 0.2);
  --borde-foco: var(--color-primario-500);

  /* Interactive States */
  --estado-opacidad-sobrevuelo: 0.08;
  --estado-opacidad-presionado: 0.12;
  --estado-opacidad-foco: 0.12;
  --estado-opacidad-deshabilitado: 0.38;

  /* Glassmorphism */
  --vidrio-fondo: rgba(255, 255, 255, 0.72);
  --vidrio-borde: rgba(255, 255, 255, 0.2);
  --vidrio-sombra: 0 8px 32px 0 rgba(0, 0, 0, 0.12);
  --vidrio-fondo-difuso: blur(12px) saturate(180%);

  /* Gradients */
  --gradiente-radial-superior: radial-gradient(circle at 20% 10%,
      rgba(140, 140, 140, 0.1),
      transparent 55%),
    radial-gradient(circle at 24% 14%,
      rgba(255, 106, 0, 0.12),
      transparent 60%);
  --gradiente-radial-inferior: radial-gradient(circle at 80% 90%,
      rgba(120, 120, 120, 0.08),
      transparent 55%),
    radial-gradient(circle at 76% 86%,
      rgba(255, 45, 26, 0.1),
      transparent 62%);
}

/* Dark Theme */
[data-theme='dark'] {
  /* Primary Colors (adjusted for dark mode) */
  --color-primario-50: #3b1f00;
  --color-primario-100: #4a2600;
  --color-primario-200: #5a2e00;
  --color-primario-300: #6b3600;
  --color-primario-400: #7d3f00;
  --color-primario-500: #ff6a00;
  --color-primario-600: #ff7f1a;
  --color-primario-700: #ff9a4d;
  --color-primario-800: #ffc38a;
  --color-primario-900: #ffe7cc;

  /* Accent Colors */
  --color-acento-50: #3b0a06;
  --color-acento-100: #4d0c08;
  --color-acento-200: #61100a;
  --color-acento-300: #7a140d;
  --color-acento-400: #941811;
  --color-acento-500: #ff2d1a;
  --color-acento-600: #ff5a4c;
  --color-acento-700: #ff877d;
  --color-acento-800: #ffb3ad;
  --color-acento-900: #ffe0de;

  /* Neutral Colors */
  --color-neutro-50: #1c1917;
  --color-neutro-100: #292524;
  --color-neutro-200: #44403c;
  --color-neutro-300: #57534e;
  --color-neutro-400: #78716c;
  --color-neutro-500: #a8a29e;
  --color-neutro-600: #d6d3d1;
  --color-neutro-700: #e7e5e4;
  --color-neutro-800: #f5f5f4;
  --color-neutro-900: #fafaf9;

  /* Surface Colors */
  --superficie-base: #0d0d0d;
  --superficie-elevada: #141414;
  --superficie-superpuesta: #1a1a1a;
  --superficie-hundida: #080808;
  --superficie-sobrevuelo: #202020;
  --superficie-presionada: #262626;

  /* Text Colors */
  --texto-principal: #f5f5f5;
  --texto-secundario: #d6d6d6;
  --texto-terciario: #a6a6a6;
  --texto-deshabilitado: #7a7a7a;
  --texto-inverso: #050505;
  --texto-enlace: var(--color-primario-600);
  --texto-enlace-sobrevuelo: var(--color-primario-700);

  /* Border Colors */
  --borde-sutil: rgba(255, 255, 255, 0.08);
  --borde-normal: rgba(255, 255, 255, 0.14);
  --borde-fuerte: rgba(255, 255, 255, 0.22);

  /* Glassmorphism */
  --vidrio-fondo: rgba(12, 12, 12, 0.74);
  --vidrio-borde: rgba(255, 255, 255, 0.16);
  --vidrio-sombra: 0 12px 36px 0 rgba(0, 0, 0, 0.55);

  /* Gradients */
  --gradiente-radial-superior: radial-gradient(circle at 18% 12%,
      rgba(26, 26, 26, 0.7),
      transparent 56%),
    radial-gradient(circle at 22% 16%,
      rgba(255, 106, 0, 0.1),
      transparent 62%);
  --gradiente-radial-inferior: radial-gradient(circle at 78% 88%,
      rgba(12, 12, 12, 0.85),
      transparent 58%),
    radial-gradient(circle at 74% 84%,
      rgba(255, 45, 26, 0.08),
      transparent 64%);

  /* Shadows (darker for dark mode) */
  --sombra-xs: 0 1px 2px 0 rgb(0 0 0 / 0.45);
  --sombra-sm: 0 2px 6px 0 rgb(0 0 0 / 0.45), 0 1px 3px -1px rgb(0 0 0 / 0.45);
  --sombra-md: 0 6px 16px -2px rgb(0 0 0 / 0.5), 0 2px 8px -2px rgb(0 0 0 / 0.5);
  --sombra-lg: 0 14px 24px -6px rgb(0 0 0 / 0.55), 0 4px 12px -4px rgb(0 0 0 / 0.55);
  --sombra-xl: 0 24px 36px -10px rgb(0 0 0 / 0.6), 0 8px 18px -8px rgb(0 0 0 / 0.6);
  --sombra-2xl: 0 32px 60px -16px rgb(0 0 0 / 0.65);
}

/* System Preference Support */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-primario-50: #3b1f00;
    --color-primario-500: #ff6a00;
    --color-primario-900: #ffe7cc;

    --superficie-base: #0d0d0d;
    --superficie-elevada: #141414;
    --superficie-superpuesta: #1a1a1a;
    --superficie-hundida: #080808;
    --superficie-sobrevuelo: #202020;
    --superficie-presionada: #262626;

    --texto-principal: #f5f5f5;
    --texto-secundario: #d6d6d6;
    --texto-terciario: #a6a6a6;
    --texto-deshabilitado: #7a7a7a;
    --texto-inverso: #050505;

    --borde-sutil: rgba(255, 255, 255, 0.06);
    --borde-normal: rgba(255, 255, 255, 0.1);
    --borde-fuerte: rgba(255, 255, 255, 0.18);

    --vidrio-fondo: rgba(12, 12, 12, 0.72);
    --vidrio-borde: rgba(255, 255, 255, 0.12);
    --vidrio-sombra: 0 8px 32px 0 rgba(0, 0, 0, 0.45);

    --gradiente-radial-superior: radial-gradient(circle at 20% 10%,
        rgba(26, 26, 26, 0.7),
        transparent 56%),
      radial-gradient(circle at 22% 14%,
        rgba(255, 106, 0, 0.1),
        transparent 62%);
    --gradiente-radial-inferior: radial-gradient(circle at 80% 90%,
        rgba(12, 12, 12, 0.85),
        transparent 58%),
      radial-gradient(circle at 76% 86%,
        rgba(255, 45, 26, 0.08),
        transparent 64%);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High Contrast Support */
@media (prefers-contrast: high) {
  :root {
    --borde-sutil: rgba(0, 0, 0, 0.2);
    --borde-normal: rgba(0, 0, 0, 0.3);
    --borde-fuerte: rgba(0, 0, 0, 0.5);
  }

  [data-theme='dark'] {
    --borde-sutil: rgba(255, 255, 255, 0.2);
    --borde-normal: rgba(255, 255, 255, 0.3);
    --borde-fuerte: rgba(255, 255, 255, 0.5);
  }
}