/* ═══════════════════════════════════════════════════════════
   HALO ESSENCE · Tokens
   Un solo lugar para color, tipografía, espacio y ritmo.

   Sobre el color: los negros son CÁLIDOS y hay tres niveles
   (fondo → tarjeta → peana de la foto). Esa escalera es lo que
   le da profundidad a la grilla. Con un solo gris todo queda
   al mismo plano, que era el problema de la versión anterior.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Grises cálidos, del más hondo al más alto ──────────── */
  --fondo:      #0b0a08;   /* la página */
  --hueco:      #000000;   /* huecos y sombras internas */
  --tarjeta:    #17140f;   /* la ficha del producto */
  --peana:      #221d15;   /* la peana donde apoya la foto */
  --realce:     #2c2619;   /* hover y campos activos */

  --linea:      #2a251c;   /* borde visible */
  --linea-fina: #1c1810;   /* separador interno */

  /* La peana clara donde apoyan las fotos de producto.
     Las imágenes vienen de fuentes muy distintas y la mayoría trae
     fondo blanco: sobre negro se veían como bloques recortados.
     Sobre este marfil cálido se integran solas, y el salto de claro
     a oscuro le da a la grilla el contraste que le faltaba. */
  --peana-foto: #ece5d6;
  --peana-foto-hondo: #d9d0bd;

  /* ── Oro: la marca. Se reserva para precio y acción ────── */
  --oro:        #c9a84c;
  --oro-alto:   #f0d384;
  --oro-bajo:   #8a7130;
  --oro-velo:   rgba(201, 168, 76, 0.12);
  --oro-borde:  rgba(201, 168, 76, 0.34);

  /* ── Texto, entonado desde el fondo cálido ─────────────── */
  /* Los tres tonos pasan 4.5:1 sobre cualquiera de los planos oscuros,
     porque casi todos se usan en textos de 10 a 12 px. El terciario
     estaba en 4.1:1 sobre --tarjeta y 3.7:1 sobre --peana: se veía bien
     pero no era legible para todo el mundo. */
  --texto:      #f3f0e8;
  --texto-2:    #a8a193;   /* 5.9:1 sobre --tarjeta */
  --texto-3:    #8f8779;   /* 5.2:1 sobre --tarjeta · 4.7:1 sobre --peana */

  /* ── Tintas ────────────────────────────────────────────────
     El color del texto sobre un fondo saturado. Van como token porque
     se repiten y porque un botón que hereda la tinta equivocada queda
     ilegible sin que nadie lo note. */
  --tinta-oro:    #16120a;
  --tinta-verde:  #04140b;
  --tinta-oferta: #ffffff;

  /* WhatsApp: verde de la marca ajena, no de la nuestra. */
  --wa:      #1eb455;
  --wa-alto: #25d366;

  /* ── Semánticos ────────────────────────────────────────── */
  --oferta:      #e0563c;
  --oferta-velo: rgba(224, 86, 60, 0.14);
  /* Más oscuro que --oferta: es el fondo de la etiqueta "−10%", que
     lleva texto blanco de 10 px en negrita. Con el rojo claro la
     combinación daba 3.8:1 y necesita 4.5:1. */
  --oferta-solida: #bf3f28;
  --ok:          #5fb383;
  --ok-velo:     rgba(95, 179, 131, 0.14);
  --alerta:      #e0a743;
  --alerta-velo: rgba(224, 167, 67, 0.14);
  --error:       #e0563c;
  --error-velo:  rgba(224, 86, 60, 0.14);

  /* ── Tipografía ─────────────────────────────────────────
     Tres familias, cada una con un oficio.

     Cormorant Garamond viene de la identidad de la marca: lleva los
     precios y los títulos.

     Jost es la voz de la tienda. Es un geométrico de la escuela de la
     Futura, que es la tipografía de la moda y la perfumería desde hace
     un siglo: en versalitas espaciadas (marcas, etiquetas) tiene la
     elegancia que un grotesco neutro no da.

     Archivo se queda en el panel, que se opera todos los días. Es un
     grotesco de trabajo, más legible que Jost en tablas densas de
     números y en textos de 10 px. La tienda se mira, el panel se usa:
     no tienen por qué compartir tipografía. */
  --display: 'Cormorant Garamond', 'Times New Roman', serif;
  --ui:      'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ui-datos: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Rampa de texto. Los dos escalones de abajo existen porque el diseño
     usa mucho la versalita espaciada, y ahí 0.72rem ya es grande:
       --t-2xs  etiquetas y marcas (MARCA, NUEVO, el nombre del mes)
       --t-3xs  la bajada bajo el logo, que es lo más chico que se imprime
     Antes había ocho valores distintos entre 0.52 y 0.68 para estos dos
     trabajos. Eran deriva, no intención: ninguno se distinguía del otro. */
  --t-3xs: 0.54rem;
  --t-2xs: 0.65rem;
  --t-xs:  0.72rem;
  --t-sm:  0.82rem;
  --t-md:  0.93rem;
  --t-lg:  1.08rem;
  --t-xl:  1.35rem;
  --t-2xl: clamp(1.6rem, 3vw, 2.1rem);
  /* Cormorant a escala de lectura: el logo y los títulos de las notas.
     Estaban en 1.26 y 1.25, que es el mismo tamaño escrito dos veces. */
  --t-display: 1.25rem;
  --t-3xl: clamp(2rem, 4.5vw, 3rem);

  /* El precio tiene su propia escala, aparte de la del texto: es el
     elemento más fuerte de la página y crece según cuánto pesa la
     decisión que acompaña. Tres tamaños, tres momentos. */
  --precio:       1.42rem;  /* en la grilla, una tarjeta entre muchas */
  --precio-chico: 1.2rem;   /* el mismo precio en pantalla angosta */
  --precio-total: 1.75rem;  /* el total del carrito */
  --precio-alto:  2rem;     /* la ficha abierta y la tarjeta destacada */

  /* ── Espacio ────────────────────────────────────────────── */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4.5rem;

  --ancho:       1400px;
  --ancho-texto: 68ch;
  --margen:      clamp(0.9rem, 3vw, 2.5rem);

  /* ── Forma ──────────────────────────────────────────────── */
  --r-sm: 5px;
  --r:    9px;
  --r-lg: 14px;
  --r-full: 999px;

  /* Sombras con desplazamiento y desenfoque de verdad, no halos. */
  --sombra:    0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.35);
  --sombra-lg: 0 4px 8px rgba(0,0,0,.4), 0 28px 60px rgba(0,0,0,.6);

  --vel:   150ms;
  --vel-2: 260ms;
  --vel-3: 520ms;
  /* Salida exponencial: arranca rápido y frena, como algo con peso. */
  --curva: cubic-bezier(0.16, 1, 0.3, 1);

  --z-header: 100;
  --z-barra:  90;
  --z-panel:  200;
  --z-modal:  300;
  --z-toast:  400;
}

@media (prefers-reduced-motion: reduce) {
  :root { --vel: 0ms; --vel-2: 0ms; --vel-3: 0ms; }

  /* :not(.mueve-igual) deja pasar lo que ES la respuesta a una acción.
     Sin esa excepción, agregar algo a la bolsa no daba ninguna señal:
     el vuelo de la foto se salta a propósito y el latido de la burbuja
     lo mataba esta regla, así que no quedaba ni vuelo ni aviso. */
  *:not(.mueve-igual),
  *:not(.mueve-igual)::before,
  *:not(.mueve-igual)::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}