:root {
  /* ==========================================================
     PALETA DE COLOR INDUSTRIAL HIGH-TECH (TEMA OSCURO CORPORATIVO)
     Estilo Vercel/Linear Industrial: Carbón profundo, naranja soldadura neón
     ========================================================== */
  /* Fondos y superficies */
  --color-bg-base: #0A0D14;
  --color-bg-surface: #121622;
  --color-bg-surface-elevated: #181D2B;
  --color-bg-surface-hover: #202636;
  --color-bg-alt: #0F131D;
  --color-bg-card: #141824;

  /* Acento Industrial (Naranja Soldadura INFRA / LSS REYES) */
  --color-primary: #F26522;
  --color-primary-light: #FF7533;
  --color-primary-dark: #E04E09;
  --color-primary-glow: rgba(242, 101, 34, 0.35);
  --color-primary-subtle: rgba(242, 101, 34, 0.12);
  --color-primary-border: rgba(242, 101, 34, 0.35);

  /* Grises y Estructura */
  --color-metal: #9CA3AF;
  --color-metal-light: #1F2937;
  --color-metal-muted: #6B7280;
  --color-metal-dark: #F3F4F6;

  /* Bordes */
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-light: rgba(255, 255, 255, 0.16);
  --color-border-accent: rgba(242, 101, 34, 0.5);

  /* Tipografía (Blanco brillante sobre Carbón Oscuro) */
  --color-text-main: #F9FAFB;
  --color-text-secondary: #D1D5DB;
  --color-text-muted: #9CA3AF;
  --color-text-faint: #6B7280;
  --color-text-inverse: #0A0D14;

  /* Canales de conversión / WhatsApp */
  --color-whatsapp: #25D366;
  --color-whatsapp-hover: #20BA5A;
  --color-whatsapp-glow: rgba(37, 211, 102, 0.35);
  --color-whatsapp-subtle: rgba(37, 211, 102, 0.12);

  /* ==========================================================
     TIPOGRAFÍA
     ========================================================== */
  --font-heading: 'Chakra Petch', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Tamaños fluidos */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.8438rem, 0.8rem + 0.2vw, 0.9063rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0313rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.6vw, 1.4375rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.6rem + 1.5vw, 2.375rem);
  --text-4xl: clamp(2.25rem, 1.8rem + 2vw, 3.125rem);
  --text-5xl: clamp(2.75rem, 2.1rem + 3vw, 4rem);

  /* ==========================================================
     ESPACIADO Y CONTENEDORES
     ========================================================== */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;

  --container-max: 1240px;
  --container-narrow: 860px;
  --header-height: 76px;

  /* ==========================================================
     BORDES Y RADIOS
     ========================================================== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ==========================================================
     SOMBRAS Y EFECTOS
     ========================================================== */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.09);
  --shadow-orange: 0 6px 20px var(--color-primary-glow);
  --shadow-whatsapp: 0 6px 20px var(--color-whatsapp-glow);
  --backdrop-blur: blur(16px);

  /* Liquid Glass design tokens */
  --glass-bg: linear-gradient(135deg, rgba(20, 25, 38, 0.72) 0%, rgba(14, 18, 28, 0.82) 100%);
  --glass-bg-hover: linear-gradient(135deg, rgba(28, 35, 52, 0.85) 0%, rgba(18, 22, 34, 0.92) 100%);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-accent: rgba(242, 101, 34, 0.38);
  --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(242, 101, 34, 0.05) 100%);
  --glass-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 16px 40px rgba(0, 0, 0, 0.4);

  /* ==========================================================
     TRANSICIONES, ANIMACIONES EMIL KOWALSKI Y Z-INDEX
     ========================================================== */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 260ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 380ms var(--ease-spring);
  --transition-smooth: 320ms var(--ease-out-expo);

  --z-base: 1;
  --z-sticky: 100;
  --z-header: 500;
  --z-drawer: 800;
  --z-floating: 900;
  --z-modal: 1000;
}