/* Hallmark · macrostructure: Catalogue · genre: playful · theme: custom (brand board TONA)
 * paper #F5ECD9 crema · ink #16233C tinta · display: Baloo 2 · body: Nunito (tipografías del brand board)
 * nav: N7 slab · footer: Ft8 marquee · enrichment: Tier B hand-built SVG mascot (Fili bobina)
 * axes: light / rounded-display / cool-blue · single-theme: claro deliberado (brand board)
 * Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 */

:root {
  /* paleta del Brand Board */
  --color-crema:  #F5ECD9;   /* fondo */
  --color-crema-2:#EFE3C8;   /* banda alternativa */
  --color-surface:#FBF6EA;   /* tarjetas */
  --color-tinta:  #16233C;   /* texto */
  --color-azul:   #2F6BE0;   /* acción principal, logo */
  --color-azul-deep:#2455B8;
  --color-sol:    #F7C94B;
  --color-rosa:   #F48CB4;   /* swatch vivo del board — confirmar hex exacto */
  --color-verde:  #2C6A5A;
  --color-coral:  #E7562C;   /* SOLO ofertas y detalles (regla del board) */
  --color-wa:     #1FA855;   /* verde WhatsApp, semántico */
  --color-rule:   #DFD3B8;
  --color-carton: #D9A968;   /* caja de envío (ceremonia del pedido) */
  --color-carton-2:#C08E4C;
  --color-neutral:#5C6473;   /* gris entintado hacia tinta */
  --color-focus:  #2455B8;

  /* alias semánticos */
  --color-paper: var(--color-crema);
  --color-ink:   var(--color-tinta);
  --color-accent: var(--color-azul);
  --color-accent-deep: var(--color-azul-deep);

  /* Fili — bobina; el color categoriza el rubro (colores del board) */
  --color-fili:       var(--color-azul);
  --color-fili-ink:   var(--color-tinta);
  --color-fili-face:  var(--color-crema);
  --color-fili-cheek: #F2B8C6;
  --color-cat-juguetes:    var(--color-sol);
  --color-cat-antiestres:  var(--color-verde);
  --color-cat-souvenirs:   var(--color-coral);
  --color-cat-electronica: var(--color-azul);
  --color-cat-deco:        var(--color-rosa);

  /* tipografía del Brand Board: Baloo 2 titulares · Nunito texto y precios */
  --font-display: "Baloo 2", ui-rounded, ui-sans-serif, sans-serif;
  --font-body:    "Nunito", ui-sans-serif, sans-serif;

  /* escala 1.25 */
  --text-sm:   0.8rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.9531rem;
  --text-2xl:  2.4414rem;
  --text-display: clamp(2.6rem, 4.5vw + 1rem, 4.6rem);

  /* espaciado 4pt */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  20px;
  --space-lg:  32px;
  --space-xl:  52px;
  --space-2xl: 84px;
  --space-3xl: 136px;
  --page-gutter: clamp(20px, 4vw, 48px);
  /* el ancho de la página entera: hero, tienda y combos comparten este valor para que las
     tres secciones queden alineadas. En pantallas grandes crece y la grilla suma columna. */
  --ancho-pagina: 1180px;

  /* motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* SOLO CTA primario + momento Fili */
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  --radius-card: 14px;
  --radius-pill: 999px;
  --rule-w: 2px;
}

/* recién acá entra la cuarta tarjeta sin achicarla: con el ancho de antes las fotos
   perdían un cuarto de tamaño y el rubro y el título se partían en dos líneas */
@media (min-width: 1500px) {
  :root { --ancho-pagina: 1520px; }
}