/* ============================================================
   IGNIT — DESIGN SYSTEM TOKENS
   Fuente única de verdad para colores, tipografía, espaciado,
   radios, sombras, transiciones y z-index.

   REGLA: ningún valor hardcoded debe existir en el resto de
   archivos CSS. Todo sale de aquí.
   ============================================================ */

:root {

  /* ============================================================
     BRAND — COLOR PRIMARIO
     ============================================================ */

  --ignit-red:      #C1121F;   /* rojo principal — más sofisticado que #ff0000 */
  --ignit-red-hov:  #D21F2F;   /* hover state */

  /* Alpha variants — pre-calculadas para rgba() usage */
  --ignit-red-80:  rgba(193, 18, 31, 0.80);
  --ignit-red-60:  rgba(193, 18, 31, 0.60);
  --ignit-red-50:  rgba(193, 18, 31, 0.50);
  --ignit-red-40:  rgba(193, 18, 31, 0.40);
  --ignit-red-30:  rgba(193, 18, 31, 0.30);
  --ignit-red-25:  rgba(193, 18, 31, 0.25);
  --ignit-red-20:  rgba(193, 18, 31, 0.20);
  --ignit-red-12:  rgba(193, 18, 31, 0.12);
  --ignit-red-05:  rgba(193, 18, 31, 0.05);

  /* Dark red — para sombras profundas */
  --ignit-red-dark: rgba(193, 18, 31, 0.80);

  /* Deep red — para gradientes muy oscuros */
  --ignit-red-deep: rgb(41, 0, 0);


  /* ============================================================
     BACKGROUNDS
     ============================================================ */

  --bg-primary:    #050505;                    /* fondo base */
  --bg-secondary:  #101010;                    /* fondo alternativo */
  --bg-card:       #181818;                    /* tarjetas de producto */
  --bg-card-alt:   #1D1D1D;                    /* headers de categoría */
  --bg-glass:      rgba(255, 255, 255, 0.02);  /* efecto cristal sutil */
  --bg-glass-hov:  rgba(255, 255, 255, 0.04);  /* cristal en hover */
  --bg-overlay:    rgba(0, 0, 0, 0.70);        /* overlay de popup/carrito */


  /* ============================================================
     TEXT
     ============================================================ */

  --text-primary:   #FFFFFF;
  --text-secondary: #B5B5B5;
  --text-muted:     #808080;
  --text-ghost:     rgba(255, 255, 255, 0.40); /* placeholders */


  /* ============================================================
     BORDERS
     ============================================================ */

  --border:            rgba(255, 255, 255, 0.08);  /* borde estándar */
  --border-subtle:     rgba(255, 255, 255, 0.05);  /* borde muy sutil */
  --border-strong:     rgba(255, 255, 255, 0.15);  /* borde visible */
  --border-red:        rgba(193, 18, 31, 0.30);    /* borde de marca */
  --border-red-focus:  rgba(193, 18, 31, 0.60);    /* borde en focus */


  /* ============================================================
     SPACING — Base 8px
     Uso: --sp-4 = 16px, --sp-8 = 40px, etc.
     ============================================================ */

  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-7:   32px;
  --sp-8:   40px;
  --sp-9:   48px;
  --sp-10:  64px;
  --sp-11:  80px;
  --sp-12:  96px;
  --sp-13: 128px;


  /* ============================================================
     BORDER RADIUS
     ============================================================ */

  --radius-sm:   8px;    /* elementos pequeños: thumbnails, badges */
  --radius-md:   14px;   /* botones, inputs */
  --radius-lg:   18px;   /* tarjetas de producto */
  --radius-xl:   22px;   /* popup, modales */
  --radius-full: 999px;  /* pills, tallas */


  /* ============================================================
     SHADOWS
     Una sola sombra premium para cada contexto.
     ============================================================ */

  --shadow-card:     0 20px 60px rgba(0, 0, 0, 0.45);

  --shadow-btn:      inset 0 0 0 1px rgba(255, 255, 255, 0.10),
                     0 7px 30px var(--ignit-red-dark);

  --shadow-btn-hov:  0 15px 35px var(--ignit-red-60),
                     0 0 20px var(--ignit-red-30);

  --shadow-red:      0 10px 30px var(--ignit-red-50);

  --shadow-inset:    inset 0 1px 0 rgba(255, 255, 255, 0.03);


  /* ============================================================
     TRANSITIONS
     Dos duraciones. Nada más.
     ============================================================ */

  --t-fast:  200ms ease;
  --t-base:  400ms ease;
  --t-slow:  700ms cubic-bezier(0.22, 1, 0.36, 1);


  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  --font-brand:   'IgnitFont', sans-serif;
  --font-display: 'Montserrat', sans-serif;

  /* Escala tipográfica */
  --text-xs:    0.75rem;   /* 12px — caption, badge */
  --text-sm:    0.85rem;   /* ~14px — descripción, precio secundario */
  --text-base:  1rem;      /* 16px — body */
  --text-lg:    1.125rem;  /* 18px — body destacado */
  --text-xl:    1.5rem;    /* 24px — h3 / footer brand */
  --text-2xl:   2rem;      /* 32px — h2 / precio principal */
  --text-3xl:   2.5rem;    /* 40px — h1 producto */
  --text-4xl:   3rem;      /* 48px */
  --text-hero:  clamp(3rem, 8vw, 6rem); /* display hero */


  /* ============================================================
     Z-INDEX
     ============================================================ */

  --z-base:   1;
  --z-above:  10;
  --z-nav:    1000;
  --z-cart:   2000;
  --z-popup:  9999;
  --z-loader: 99999;

}