/* ============================================================
   FACTORY VAPE DISTRO — CSS Variables / Design Tokens
   ============================================================ */

:root {
  /* Brand Colors */
  --color-primary: #E50000;
  --color-primary-dim: rgba(229, 0, 0, 0.08);
  --color-primary-glow: rgba(229, 0, 0, 0.2);
  --color-black: #000000;
  --color-bg: #F8F9FA;
  /* Blanco elegante, suave a la vista */
  --color-bg-2: #FFFFFF;
  /* Pura elegancia para secciones destacadas */
  --color-bg-3: #E9ECEF;
  /* Gris muy claro para profundidad */
  --color-text: #1A1A1A;
  /* Charcoal oscuro para legibilidad premium */
  --color-grey: #666666;
  --color-grey-dark: #343A40;
  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-red: rgba(229, 0, 0, 0.15);
  --color-wa: #1DA851;
  /* Un verde un poco más sobrio */
  --color-wa-dark: #16803D;

  /* Typography */
  --font-title: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;

  /* Spacing */
  --gap-xs: 0.5rem;
  --gap-sm: 1rem;
  --gap-md: 1.5rem;
  --gap-lg: 2rem;
  /* Reducido de 2.5rem */
  --gap-xl: 3rem;
  /* Reducido de 4rem */
  --gap-2xl: 5rem;
  /* Reducido de 7rem */

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.28s ease;
  --transition-slow: 0.5s ease;

  /* Nav Height */
  --nav-height: 68px;

  /* Z-index layers */
  --z-base: 1;
  --z-float: 10;
  --z-cart: 100;
  --z-nav: 200;
  --z-modal: 300;
  --z-top: 999;
}