/* =============================================================
   KOBU · tokens compartidos
   -------------------------------------------------------------
   Los valores de marca que usan LAS DOS hojas: catalogo.css (el
   catálogo A4) y tienda.css (la tienda mobile). Estaban duplicados
   en ambas, así que cambiar un color obligaba a acordarse de tocar
   los dos archivos — y si te olvidabas de uno, el catálogo y la
   tienda quedaban con celestes distintos.

   Se carga ANTES que la hoja de cada página, así cada una puede
   pisar un token si de verdad lo necesita.

   Ojo: acá sólo van los tokens que tienen el MISMO valor en ambas.
   `--rule` no está a propósito: el catálogo usa un gris más oscuro
   (0.88) que la tienda (0.9). Si lo unificás, cambiás el aspecto de
   una de las dos — es una decisión de diseño, no una limpieza.
   ============================================================= */
:root{
  /* celeste de marca */
  --kobu-blue:      oklch(0.68 0.16 232);   /* celeste vibrante */
  --kobu-blue-2:    oklch(0.55 0.17 235);   /* celeste profundo */
  --kobu-blue-soft: oklch(0.96 0.025 232);

  /* tela = rosa lengua-del-perro */
  --kobu-pink:      oklch(0.74 0.16 18);
  --kobu-pink-2:    oklch(0.56 0.18 18);
  --kobu-pink-soft: oklch(0.97 0.025 18);

  /* genérico = gris */
  --kobu-gray-soft: oklch(0.95 0.003 250);
  --kobu-gray:      oklch(0.55 0.005 250);

  /* tinta (texto) */
  --ink:    oklch(0.18 0.012 250);
  --ink-2:  oklch(0.32 0.010 250);
  --ink-3:  oklch(0.50 0.008 250);

  /* tipografías */
  --serif: "Lora", "Times New Roman", serif;
  --sans:  "Nunito Sans", system-ui, sans-serif;

  /* ---------------------------------------------------------------
     COLORES DE TELA
     Cada material tiene su tono, siempre el mismo en la tienda y en el
     catálogo A4: si "Gabardina" es azul, lo es en los dos lados. El
     chip elige el suyo con `tono` desde catalog-data.js, así el color
     de una tela se define UNA vez acá y no se repite por cada renderer.

     Los fondos son deliberadamente tenues (croma bajo): son etiquetas
     de material, tienen que leerse como información y no competir con
     el precio ni con el botón de agregar.
     --------------------------------------------------------------- */
  --tela-azul-bg:        oklch(0.95 0.035 240);   /* gabardina */
  --tela-azul-ink:       oklch(0.42 0.13 245);
  --tela-celeste-bg:     oklch(0.95 0.04 205);    /* polar soft */
  --tela-celeste-ink:    oklch(0.42 0.10 215);
  --tela-arena-bg:       oklch(0.955 0.035 85);   /* tusor */
  --tela-arena-ink:      oklch(0.45 0.09 70);
  --tela-lino-bg:        oklch(0.955 0.028 110);  /* lino */
  --tela-lino-ink:       oklch(0.43 0.07 115);
  --tela-verde-bg:       oklch(0.95 0.035 150);   /* cordura */
  --tela-verde-ink:      oklch(0.42 0.10 155);
  --tela-terracota-bg:   oklch(0.95 0.035 45);    /* corderoy */
  --tela-terracota-ink:  oklch(0.45 0.11 40);
  --tela-rosa-bg:        oklch(0.955 0.030 18);   /* piel de mono */
  --tela-rosa-ink:       oklch(0.47 0.13 18);
  --tela-gris-bg:        oklch(0.955 0.004 250);  /* friselina */
  --tela-gris-ink:       oklch(0.44 0.008 250);
  --tela-crema-bg:       oklch(0.965 0.030 95);   /* corderito */
  --tela-crema-ink:      oklch(0.45 0.08 85);
  --tela-vellon-bg:      #fff;                    /* vellón — siempre blanco */
  --tela-vellon-ink:     oklch(0.34 0.010 250);
  --tela-vellon-line:    oklch(0.80 0.010 250);
  --tela-refuerzo-bg:    oklch(0.94 0.045 300);   /* antidesgarro */
  --tela-refuerzo-ink:   oklch(0.42 0.14 300);

  /* Packs y combos: NARANJA. El verde ya lo usa la ganancia de reventa
     en toda la tienda, así que un pack en verde se leía como "esto es
     lo que ganás" en vez de "esto es una oferta armada". */
  --pack:        oklch(0.63 0.17 52);
  --pack-ink:    oklch(0.45 0.15 48);
  --pack-soft:   oklch(0.97 0.03 60);
  --pack-line:   oklch(0.85 0.09 55);

  /* Cintas cruzadas en la esquina de la foto: roja para lo nuevo,
     amarilla para la edición de verano. Van en esquinas opuestas para
     que un producto que es las dos cosas no las superponga. */
  --cinta-nuevo-bg:   oklch(0.55 0.20 28);
  --cinta-nuevo-ink:  #fff;
  --cinta-verano-bg:  oklch(0.86 0.15 92);
  --cinta-verano-ink: oklch(0.35 0.09 70);

  /* El rojo de liquidación, el amarillo del saldo de regalo y el verde
     de ganancia: los usa la tienda Y la portada del catálogo A4, que
     lleva los mismos tres listones. Vivían sólo en tienda.css, así que
     la portada los tenía copiados a mano y cambiaba uno solo. */
  --liq:              oklch(0.55 0.20 28);
  --kobu-yellow:      oklch(0.93 0.11 92);
  --kobu-yellow-soft: oklch(0.965 0.055 92);
  --kobu-yellow-ink:  oklch(0.42 0.08 75);
  --gain:             oklch(0.52 0.13 155);
  --gain-soft:        oklch(0.96 0.03 155);

  /* Temas de sección: el verano se distingue del resto, y los
     colchones son la línea que se quiere destacar. */
  --tema-verano-bg:      oklch(0.975 0.045 95);   /* amarillo de verano */
  --tema-verano-line:    oklch(0.88 0.09 95);
  --tema-verano-ink:     oklch(0.42 0.09 75);
  --tema-destacado-bg:   oklch(0.955 0.022 60);   /* marrón cálido */
  --tema-destacado-line: oklch(0.84 0.045 60);
  --tema-destacado-ink:  oklch(0.40 0.06 55);
}