/**
 * ELECTROPOWER GENERATION - SISTEMA DE TOKENS CORPORATIVOS (MILESTONE M1)
 * Archivo: public/assets/css/tokens.css
 * Basado en: logoNuevo.jpg y directrices de Soluciones en Energía e Hidráulicos S.A.S.
 */

:root {
  /* ==========================================================================
     1. PALETA CROMÁTICA CORPORATIVA (BRAND PALETTE)
     ========================================================================== */
  
  /* Primario: Rojo Energía Electropower (Botones CTA, badges de potencia, acentos) */
  --ep-color-red-primary: #E53935;
  --ep-color-red-hover:   #D32F2F;
  --ep-color-red-dark:    #B71C1C;
  --ep-color-red-deep:    #991B1B;
  --ep-color-red-light:   #FFEBEE;
  --ep-color-red-rgb:     229, 57, 53;

  /* Secundario: Azul Marino Industrial (Barras principales, encabezados, footer) */
  --ep-color-navy-primary: #1E3A5F;
  --ep-color-navy-hover:   #162C47;
  --ep-color-navy-dark:    #11223F;
  --ep-color-navy-deep:    #0A1424;
  --ep-color-navy-light:   #E8EEF5;
  --ep-color-navy-rgb:     30, 58, 95;

  /* Neutros y Superficies de Fondo */
  --ep-color-white:        #FFFFFF;
  --ep-color-surface-light:#F8FAFC; /* Slate-50: fondo general limpio */
  --ep-color-surface-card: #FFFFFF; /* Fondo de tarjetas de producto */
  --ep-color-surface-alt:  #F1F5F9; /* Slate-100: secciones alternadas */
  --ep-color-border-subtle:#E2E8F0; /* Slate-200: bordes de tarjetas */
  --ep-color-border-strong:#CBD5E1; /* Slate-300: bordes de formularios */
  
  /* Texto y Tipografía */
  --ep-color-text-title:   #0F172A; /* Slate-900: títulos de alta legibilidad */
  --ep-color-text-body:    #1E293B; /* Slate-800: párrafos y descripciones */
  --ep-color-text-muted:   #64748B; /* Slate-500: textos secundarios y SKU */
  --ep-color-text-inverse: #FFFFFF; /* Texto sobre fondos oscuros/rojos */

  /* Estados y Acentos Comerciales */
  --ep-color-whatsapp:       #25D366; /* Verde oficial WhatsApp */
  --ep-color-whatsapp-hover: #1EBE5D;
  --ep-color-whatsapp-rgb:   37, 211, 102;
  
  --ep-color-success:        #16A34A; /* Verde stock disponible */
  --ep-color-success-bg:     #DCFCE7;
  --ep-color-warning:        #D97706; /* Ámbar stock bajo / advertencia */
  --ep-color-warning-bg:     #FEF3C7;
  --ep-color-danger:         #DC2626; /* Emergencia 24/7 / Agotado */
  --ep-color-danger-bg:      #FEE2E2;
  --ep-color-info:           #0284C7; /* Azul técnico telemetría IIoT */
  --ep-color-info-bg:        #E0F2FE;

  /* ==========================================================================
     2. ESCALA TIPOGRÁFICA Y FUENTES (FLUID TYPOGRAPHY)
     ========================================================================== */
  --ep-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ep-font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ep-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Escala fluida con clamp() */
  --ep-text-xs:   0.75rem;                       /* 12px */
  --ep-text-sm:   0.875rem;                      /* 14px */
  --ep-text-base: 1rem;                          /* 16px */
  --ep-text-md:   1.125rem;                      /* 18px */
  --ep-text-lg:   clamp(1.15rem, 1.2vw + 0.8rem, 1.25rem); /* ~20px */
  --ep-text-xl:   clamp(1.25rem, 1.5vw + 0.9rem, 1.5rem);  /* ~24px */
  --ep-text-2xl:  clamp(1.5rem, 2vw + 1rem, 1.875rem);     /* ~30px */
  --ep-text-3xl:  clamp(1.75rem, 2.5vw + 1.1rem, 2.25rem); /* ~36px */
  --ep-text-4xl:  clamp(2.1rem, 3.5vw + 1.2rem, 3rem);     /* ~48px */

  /* Pesos de Fuente */
  --ep-font-normal:   400;
  --ep-font-medium:   500;
  --ep-font-semibold: 600;
  --ep-font-bold:     700;
  --ep-font-extrabold:800;

  /* Alturas de Línea */
  --ep-leading-tight:  1.15;
  --ep-leading-snug:   1.3;
  --ep-leading-normal: 1.5;
  --ep-leading-relaxed:1.65;

  /* ==========================================================================
     3. ESPACIADOS Y CONTENEDORES (SPACING & LAYOUT)
     ========================================================================== */
  --ep-space-1:  0.25rem; /* 4px */
  --ep-space-2:  0.5rem;  /* 8px */
  --ep-space-3:  0.75rem; /* 12px */
  --ep-space-4:  1rem;    /* 16px */
  --ep-space-5:  1.25rem; /* 20px */
  --ep-space-6:  1.5rem;  /* 24px */
  --ep-space-8:  2rem;    /* 32px */
  --ep-space-10: 2.5rem;  /* 40px */
  --ep-space-12: 3rem;    /* 48px */
  --ep-space-16: 4rem;    /* 64px */
  --ep-space-20: 5rem;    /* 80px */

  /* Contenedores de Ancho */
  --ep-container-sm: 640px;
  --ep-container-md: 768px;
  --ep-container-lg: 1024px;
  --ep-container-xl: 1240px;
  --ep-container-2xl:1400px;

  /* Padding horizontal estándar para pantallas */
  --ep-container-gutter: clamp(1rem, 3vw, 2rem);

  /* ==========================================================================
     4. RADIOS, SOMBRAS Y ELEVACIONES (ELEVATION & SHADOWS)
     ========================================================================== */
  --ep-radius-xs: 3px;
  --ep-radius-sm: 6px;
  --ep-radius-md: 10px;
  --ep-radius-lg: 16px;
  --ep-radius-full: 9999px;

  /* Sombras de Profundidad */
  --ep-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --ep-shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --ep-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --ep-shadow-lg: 0 12px 24px -4px rgba(15, 23, 42, 0.12), 0 4px 8px -2px rgba(15, 23, 42, 0.06);
  --ep-shadow-xl: 0 20px 35px -8px rgba(15, 23, 42, 0.20), 0 8px 16px -4px rgba(15, 23, 42, 0.08);
  --ep-shadow-whatsapp: 0 8px 24px rgba(37, 211, 102, 0.35);

  /* Transiciones */
  --ep-transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ep-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --ep-transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-Index Jerárquico */
  --ep-z-dropdown:   1000;
  --ep-z-sticky:     1020;
  --ep-z-drawer-bg:  1040;
  --ep-z-drawer:     1050;
  --ep-z-modal-bg:   1060;
  --ep-z-modal:      1070;
  --ep-z-whatsapp:   1080;
  --ep-z-toast:      1090;
}