/* ==========================================================================
   DESIGN TOKENS — Grupo D&L
   Colores extraídos de las capturas de Stitch. La tipografía es una
   propuesta (Poppins/Inter); si Stitch usó otra fuente, se cambia acá
   nomás y se propaga a todo el sitio.
   ========================================================================== */

:root {
  /* Marca */
  --color-primary: #3D2A63;        /* morado principal: botones, nav, precios */
  --color-primary-dark: #3D2A63;   /* morado oscuro: headers, drawer, footer */
  --color-primary-darker: #2A1C45;
  --color-accent-gold: #C5A059;    /* dorado: detalles premium, acentos */
  --color-whatsapp: #20D162;       /* verde botón WhatsApp */

  /* Estados / badges */
  --color-badge-new: #3D2A63;      /* NUEVO */
  --color-badge-sale: #E03131;     /* -15% */
  --color-badge-hot: #1D2E42;      /* HOT / NEW variante oscura */
  --color-success: #2FAE60;        /* stock disponible */
  --color-danger: #E03131;

  /* Neutros */
  --color-bg: #FEF7FE;             /* fondo general lavanda muy claro */
  --color-bg-alt: #FFFFFF;
  --color-text: #1A1A1A;
  --color-text-muted: #6B6470;
  --color-border: #E7E1EC;

  /* Tipografía */
  --font-heading: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Tamaños */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;

  /* Espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Bordes / sombras */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 2px 10px rgba(61, 42, 99, 0.08);
  --shadow-elevated: 0 8px 24px rgba(61, 42, 99, 0.18);

  /* Layout */
  --max-width: 480px;   /* mobile-first, el diseño de Stitch es 100% móvil */
  --header-h: 204px; /* fallback estático; cart.js lo corrige con la altura real medida del header (varía con el ancho de pantalla) */
  --bottomnav-h: 60px;
}