/*
  Design tokens — Regalos Bakanos
  Paleta extraída directamente del logo oficial (fondo blanco, tipografía
  "BAKANOS" multicolor, silueta tinta/marino, e íconos de categoría).
  No se inventan colores fuera de esta paleta.

  Breakpoints usados en todo el sitio (documentado aquí, sin custom media):
    sm: 640px · md: 768px · lg: 1024px · xl: 1280px · 2xl: 1536px
*/

:root {
  /* ── Tinta / marca base (transmite confianza y solidez) ── */
  --color-ink:          #131328;
  --color-ink-soft:     #2E2E4D;
  --color-ink-faint:    #5A5A74; /* +contraste vs #6B6B85: AA sobre blanco y sobre bg-soft */

  /* ── Fondo y superficies ──
     Off-white cálido (tendencia 2026 "cloud dancer"): descansa la vista y hace
     resaltar la fotografía de producto más que el gris azulado anterior. */
  --color-bg:           #FFFFFF;
  --color-bg-soft:      #F8F7F3;
  --color-bg-alt:       #FDF3F8;
  --color-border:       #E9E7E1;
  --color-border-soft:  #F1F0EB;

  /* ── Marca primaria (magenta del logo) — CTAs, enlaces, foco ── */
  --color-primary:        #E4257E;
  --color-primary-dark:   #B81765;
  --color-primary-light:  #FCE4EF;
  --color-primary-contrast: #FFFFFF;

  /* ── Marca secundaria (naranja del logo) — ofertas, urgencia moderada ── */
  --color-secondary:       #FF6B35;
  --color-secondary-dark:  #DC4F1F;
  --color-secondary-light: #FFE9DE;

  /* ── Colores de categoría (íconos del logo) ── */
  --cat-salud:      #5FA836;
  --cat-salud-soft: #EAF5E2;
  --cat-tecnologia:      #1CADE4;
  --cat-tecnologia-soft: #E3F6FC;
  --cat-moda:      #17A2A6;
  --cat-moda-soft: #DFF4F4;
  --cat-juguetes:      #FFC93C;
  --cat-juguetes-soft: #FFF7DF;
  --cat-hogar:      #8E44AD;
  --cat-hogar-soft: #F4E9F8;
  --cat-mascotas:      #E23B6E;
  --cat-mascotas-soft: #FCE6ED;

  /* ── Semánticos ── */
  --color-success:       #3FA34D;
  --color-success-soft:  #E7F5EA;
  --color-danger:        #E63946;
  --color-danger-soft:   #FCE8E9;
  --color-warning:       #FFB100;
  --color-warning-soft:  #FFF3D6;
  --color-star:          #FFC107;

  /* ── Texto ── */
  --color-text:            var(--color-ink);
  --color-text-secondary:  var(--color-ink-faint);
  --color-text-inverse:    #FFFFFF;

  /* ── Tipografía ──
     Display: Bricolage Grotesque (variable, expresiva — tendencia 2026) con
     Poppins de respaldo mientras carga. Cuerpo: Inter (legibilidad probada).
     Escala fluida con clamp(): los títulos crecen con el viewport sin saltos
     bruscos entre breakpoints — mejor jerarquía en móvil, más impacto en desktop. */
  --font-display: 'Bricolage Grotesque', 'Poppins', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   clamp(1.25rem, 1.1rem + 0.7vw, 1.375rem);
  --fs-xl:   clamp(1.5rem, 1.3rem + 1vw, 1.75rem);
  --fs-2xl:  clamp(1.75rem, 1.4rem + 1.8vw, 2.25rem);
  --fs-3xl:  clamp(2.1rem, 1.6rem + 2.5vw, 3rem);
  --fs-4xl:  clamp(2.5rem, 1.8rem + 3.5vw, 3.75rem);

  /* ── Espaciado ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-12: 6rem;

  /* ── Bordes y radios ── */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 999px;

  /* ── Sombras ── */
  --shadow-sm: 0 1px 3px rgba(20, 20, 43, 0.08);
  --shadow-md: 0 6px 20px rgba(20, 20, 43, 0.10);
  --shadow-lg: 0 16px 40px rgba(20, 20, 43, 0.14);
  --shadow-cta: 0 10px 24px rgba(228, 37, 126, 0.35);

  /* ── Transiciones ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 420ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Contenedor ── */
  --container-max: 1360px;

  /* ── Z-index ── */
  --z-header:      100;
  --z-mega-menu:   110;
  --z-sticky-bar:  120;
  --z-lightbox:    200;
  --z-modal:       210;
  --z-toast:       220;
}