/* ═══════════════════════════════════════════════════════════════════════════
   shop-tema.css — TEMA DE TIENDA de la perfumería (V4 MB-C, portada premium).
   SOLO TOKENS: este fichero no lleva ni una regla de selector. Lo carga el
   escaparate (hoy la portada, pages/shop/index.html) DESPUES de css/shop.css,
   y css/shop.css lo consume unicamente por var(--shop-theme-*), siempre con
   respaldo al sistema Big Asere: una pagina que no cargue el tema pinta igual
   que antes.

   ── POR QUE UN FICHERO DE TOKENS APARTE ────────────────────────────────
   El acta SHOP-021b (punto 2, COLA @puerta-produccion :4828-4900; A-1 del
   borrador @docs/shop-diseno-esencia) separa dos pieles: el sistema Big Asere
   (paneles, carrito, pago) y el TEMA DE TIENDA, «configurable por datos, del
   que Esencia es el primero». La directiva V4 del dueño (2026-10-06) hace de
   Shop UNA tienda de perfumes, y su peticion del 2026-10-06 pide que la
   portada se sienta como una perfumeria premium. Estos tokens son esa piel.
   Los valores salen del paquete de diseño aprobado como primer tema
   (docs/shop/diseno/esencia-diseno-shop-v1/tokens/tokens.css @docs/
   shop-diseno-esencia): se cita cada uno. Lo que no esta en ese paquete va
   marcado PROPUESTA y espera el visto bueno de Abraham en el iPhone.

   ── LO QUE NO ES ───────────────────────────────────────────────────────
   No es una copia de ui-kit/tokens.css (eso son los --shop-* de shop.css) y
   no redefine ningun token del kit. El guard de tokens (docs/calidad) lo mide
   como SEGUNDO fichero de tokens (--tokens …,css/shop-tema.css); sin el, sus
   definiciones salen como «valor fuera de tokens», que es exactamente lo que
   son: tokens de tema, no del kit.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* Tinta del tema: la pieza oscura (heroe, banda de coleccion). tokens.css
     Esencia :9 --color-tinta #141414 (18,4:1 sobre blanco). */
  --shop-theme-ink:          #141414;
  /* Hover de lo oscuro. Esencia :10 --color-tinta-2. */
  --shop-theme-ink-2:        #3A3A3A;
  /* Texto sobre la tinta. Esencia :15 --color-fondo. */
  --shop-theme-on-ink:       #FFFFFF;
  /* Texto secundario sobre la tinta. PROPUESTA: blanco al 72 %
     (≈ 11:1 sobre #141414; el kit tiene .62, que da 8,3:1 y se lee gris). */
  --shop-theme-on-ink-muted: rgba(255, 255, 255, .72);
  /* Acento calido, SOLO sobre la tinta (ojo, palabra en cursiva, boton del
     heroe): Esencia :19 --color-oro #C9A45C, «solo decorativo, nunca texto
     sobre blanco» (2,35:1). Sobre #141414 da 8,5:1. */
  --shop-theme-accent:       #C9A45C;
  /* Texto sobre el acento (boton del heroe): la tinta. 8,5:1. Esencia :9. */
  --shop-theme-accent-ink:   #141414;
  /* Crema para fondos de foto y circulos de categoria. Esencia :17
     --color-crema #F6F4F1. */
  --shop-theme-cream:        #F6F4F1;
  /* Divisor sobre crema/blanco. Esencia :13 --color-divisor. */
  --shop-theme-line:         #E6E2DC;
  /* Linea sobre la tinta. PROPUESTA: blanco al 14 % (= --on-dark-line del kit). */
  --shop-theme-line-on-ink:  rgba(255, 255, 255, .14);

  /* Tipografia de DISPLAY del tema (titular del heroe, titulos de seccion y
     de banda). Esencia :27 --fuente-display: Bodoni Moda. Se carga de Google
     Fonts, que la CSP de /pages/shop/* ya admite (style-src y font-src). El
     texto corriente sigue en la pila del sistema (--shop-font-body-tienda). */
  --shop-theme-font-display: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  /* Tamaños del display. Esencia :36 --texto-36 (hero movil), :38 --texto-60
     (hero escritorio); entre los dos, fluido (PROPUESTA el clamp). */
  --shop-theme-t-hero:       clamp(2.25rem, 1.4rem + 4vw, 3.75rem);
  --shop-theme-t-band:       clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
  /* Titulos de seccion de la portada: 22 (Esencia :33 --texto-22). */
  --shop-theme-t-section:    1.375rem;
  --shop-theme-lh-title:     1.2;    /* Esencia :46 --interlineado-titulo */
  --shop-theme-tracking:     0.16em; /* Esencia :45 --tracking-3 (etiquetas) */

  /* Esquinas del tema. El paquete trae 0 (botones y tarjetas) y pill
     (chips); el circulo de categoria es un pill. Esencia :60, :62. */
  --shop-theme-r-0:          0;
  --shop-theme-r-pill:       999px;

  /* Medidas del circulo de categoria (PROPUESTA): 64 en movil, 88 desde
     escritorio; 44 es la zona tactil minima del kit. */
  --shop-theme-cat-size:        64px;
  --shop-theme-cat-size-wide:   88px;
  /* Alto del boton principal del heroe. Esencia :86 --boton-principal-alto. */
  --shop-theme-btn-h:        48px;
}