/* =============================================================================
   JALAPEÑOS 2026 — DESIGN TOKENS
   Todas las variables CSS del sistema de diseño.
   No modificar valores directamente en componentes — usar estas variables.
   DESIGN_VARIANCE: 8 | MOTION_INTENSITY: 7 | VISUAL_DENSITY: 4
   ============================================================================= */

:root {

  /* ---------------------------------------------------------------------------
     COLORES
     --------------------------------------------------------------------------- */

  /* Fondos */
  --color-bg:          #050505;  /* Negro profundo — fondo base. OFF-BLACK, no pure black. */
  --color-bg-card:     #0F0F0F;  /* Cards y superficies elevadas */
  --color-bg-hover:    #161616;  /* Hover states en cards */
  --color-bg-section:  #0A0A0A;  /* Secciones alternativas */

  /* Acento — único color de acento */
  --color-accent:      #CCFF00;  /* Amarillo jalapeño — el único acento de color */
  --color-accent-dark: #B8E600;  /* Pressed state del acento */
  --color-accent-rgb:  204, 255, 0; /* Para uso en rgba() */

  /* Texto */
  --color-white:       #FFFFFF;
  --color-gray-100:    #F0F0F0;
  --color-gray-300:    #C4C4C4;
  --color-gray-400:    #A0A0A0;  /* Texto secundario */
  --color-gray-600:    #4A4A4A;  /* Bordes sutiles */
  --color-gray-700:    #2A2A2A;  /* Separadores internos */

  /* Semánticos */
  --color-red:         #E03030;  /* Solo CTAs secundarios específicos */
  --color-border:      var(--color-gray-600);
  --color-border-subtle: #222222;

  /* ---------------------------------------------------------------------------
     TIPOGRAFÍA — ESCALA
     --------------------------------------------------------------------------- */

  /* Familias */
  --font-display:  'Barlow Condensed', 'Arial Narrow', sans-serif;  /* Titulares */
  --font-body:     'Plus Jakarta Sans', system-ui, sans-serif;       /* Cuerpo */

  /* Escala — fluid type con clamp() */
  --text-hero:     clamp(52px, 7vw, 96px);     /* Hero headline */
  --text-h1:       clamp(40px, 5vw, 80px);     /* Section headlines */
  --text-h2:       clamp(28px, 3vw, 48px);     /* Sub-headlines */
  --text-h3:       clamp(20px, 2vw, 32px);     /* Cards, subsecciones */
  --text-h4:       clamp(16px, 1.5vw, 22px);   /* Labels grandes */
  --text-body:     16px;                         /* Cuerpo base */
  --text-small:    13px;                         /* Notas, footnotes */
  --text-label:    11px;                         /* Labels de sección */

  /* Escala refinada — aliases para componentes nuevos */
  --text-display:  clamp(40px, 5vw, 72px);      /* Display headlines */
  --text-stat:     clamp(56px, 7vw, 96px);      /* Números grandes (ROAS, garantía) */
  --text-xl:       clamp(24px, 3vw, 36px);      /* XL — sub-headlines y KPIs */
  --text-sm:       14px;                         /* Small — body secundario */
  --text-xs:       11px;                         /* XS — labels y tags */

  /* Pesos */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-black:   800;

  /* Line heights */
  --leading-tight:  0.92;   /* Titulares grandes */
  --leading-snug:   1.1;    /* Titulares medianos */
  --leading-normal: 1.5;    /* Cuerpo */
  --leading-relaxed: 1.65;  /* Textos largos */

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-widest: 0.15em;

  /* ---------------------------------------------------------------------------
     ESPACIADO Y GEOMETRÍA
     --------------------------------------------------------------------------- */

  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    8px;   /* Máximo border-radius en el sistema */

  /* Layout */
  --container:    1280px;
  --container-md: 960px;
  --container-sm: 720px;
  --gutter:       clamp(24px, 5vw, 80px);

  /* Gaps de sección */
  --section-gap:        clamp(80px, 12vw, 160px);
  --section-gap-sm:     clamp(24px, 3vw, 40px);
  --component-gap:      clamp(24px, 3vw, 48px);

  /* Gaps adicionales */
  --section-gap-lg:     clamp(80px, 10vw, 140px);
  --section-gap-md:     clamp(48px, 6vw, 80px);

  /* Padding interno de componentes */
  --pad-card:     clamp(24px, 3vw, 40px);
  --pad-section-x: var(--gutter);
  --pad-section-y: var(--section-gap);

  /* ---------------------------------------------------------------------------
     TRANSICIONES Y MOVIMIENTO
     MOTION_INTENSITY: 7 — Fluid CSS con scroll reveals
     --------------------------------------------------------------------------- */

  /* Easing personalizado — sin linear, sin ease-in-out genérico */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);     /* Salida rápida — el principal */
  --ease-in-out:     cubic-bezier(0.87, 0, 0.13, 1);    /* Entrada/salida suave */
  --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1); /* Con overshoot sutil */
  --ease-sharp:      cubic-bezier(0.25, 0, 0, 1);       /* Sharp out */

  /* Duraciones */
  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   500ms;
  --duration-slower: 800ms;

  /* Transición estándar para la mayoría de elementos */
  --transition-base: all var(--duration-base) var(--ease-out);
  --transition-fast: all var(--duration-fast) var(--ease-out);
  --transition-slow: all var(--duration-slow) var(--ease-out);

  /* ---------------------------------------------------------------------------
     SOMBRAS — tintadas al fondo, sin harsh drop shadows
     --------------------------------------------------------------------------- */

  --shadow-card:   0 1px 3px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.3);
  --shadow-hover:  0 2px 8px rgba(0,0,0,0.5), 0 16px 40px rgba(0,0,0,0.4);
  --shadow-accent: 0 0 0 1px var(--color-accent);  /* Border glow en accent */

  /* Glow sutil amarillo para elementos activos — muy contenido */
  --glow-accent:   0 0 20px rgba(var(--color-accent-rgb), 0.12);

  /* ---------------------------------------------------------------------------
     Z-INDEX — sistema de capas
     --------------------------------------------------------------------------- */

  --z-base:    1;
  --z-above:   10;
  --z-sticky:  100;   /* Nav sticky */
  --z-overlay: 200;   /* Mobile menu overlay */
  --z-modal:   300;

  /* ---------------------------------------------------------------------------
     BREAKPOINTS — valores de referencia (usar en media queries directamente)
     sm: 640px | md: 768px | lg: 1024px | xl: 1280px
     --------------------------------------------------------------------------- */

}