/* Rouge · tokens del sistema visual.
   ─────────────────────────────────────────────────────────────────────────────
   FUENTE: concepto de web para Glossier de Natalie Demidova (Behance, jun. 2024),
   publicado como pieza de inspiración no comercial.
   Del proyecto se toma el LENGUAJE DE DISEÑO —retícula, esquinas, píldoras,
   chips y el movimiento tipográfico cruzado— y también su paleta, por decisión
   expresa de Ana. Se deja constancia de que el rosa y el rojo son la identidad
   cromática de una marca existente.

   MEDIDO (no estimado): la paleta sale de muestrear 1.602.650 píxeles de las 16
   láminas del proyecto con canvas, más muestreo por coordenada sobre la lámina
   de la home. Los porcentajes son la presencia real de cada tono.

   INFERIDO (no medido): la tipografía. De una imagen no se obtiene el nombre de
   la fuente ni su interletrado. Se proponen dos equivalentes con licencia OFL,
   elegidas por parecido estructural — no son las del original.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* ---- Color ---- Dos superficies planas que se alternan. Sin degradados,
     sin sombras duras: casi la mitad de la referencia es color plano. */
  --rosa:   #F8E4E4;   /* fondo del sitio · 25,6 % de la referencia */
  --rojo:   #DE3B3B;   /* superficie y tinta de voz alta · 19,9 % */
  --blanco: #FFFAFB;   /* respiro · 8,5 % */
  --gris:   #EFF0F0;   /* tarjetas de producto · 4,8 % */
  --rojo-hondo: #BC3134;  /* rojo del footer, un punto más apagado */

  /* ---- Tipografía ----
     Display: grotesca geométrica de peso alto CON itálica real. El original
     parece una Aeonik/Söhne; Plus Jakarta Sans es la equivalente OFL más cercana
     en estructura y sí tiene itálica de verdad, no oblicua sintética.
     Acento: serif de contraste alto en itálica (didona). El original es una
     didona condensada; Bodoni Moda es didona real y OFL.
     Se cargan solo los cortes que el CSS usa: Jakarta 400-800 + 800 itálica,
     Bodoni 600 itálica. */
  --f-display: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
  --f-acento:  'Bodoni Moda', 'Didot', Georgia, serif;
  --fs-body:   1rem;
  --lh-body:   1.55;

  /* ---- Escala de espacio ---- */
  --p-2: 1rem;
  --p-3: 1.5rem;
  --p-4: 2rem;
  --p-5: 3rem;
  --p-6: 4rem;
  --p-7: 6rem;

  /* ---- Layout ----
     El sistema no usa retícula estrecha: los bloques respiran casi a sangre
     dentro de un marco redondeado que envuelve la página entera. */
  --pad-x:  var(--p-4);
  --marco:  var(--p-2);      /* aire entre el borde de la ventana y el marco */

  /* ---- Radios ---- Generosos y en tres pasos. Es lo que más define la piel. */
  --r-marco:  28px;   /* el marco de página */
  --r-panel:  22px;   /* paneles y tarjetas grandes */
  --r-card:   16px;   /* tarjetas pequeñas y fotos */
  --r-pill:   999px;  /* píldoras, chips y botones */

  /* ---- Motion ---- */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --dur-hover:  0.28s;
  --dur-appear: 0.7s;
  --appear-y:   26px;
}

/* Entrada al viewport: fundido con subida corta */
@keyframes appear-in { from { opacity: 0; transform: translateY(var(--appear-y)); } to { opacity: 1; transform: none; } }
.has-js .appear { opacity: 0; transform: translateY(var(--appear-y)); }
.appear.in { animation: appear-in var(--dur-appear) var(--ease) forwards; }

@media (prefers-reduced-motion: reduce) {
  .has-js .appear, .appear { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ---- PALETAS DE ROUGE ------------------------------------------------------
 * Variantes de color de la misma piel. Cambian estos cinco valores y nada más.
 * Cada color conserva su PAPEL, que es lo que evita que el diseño se caiga:
 *
 *   --rojo        EL QUE MANDA. Acentos, kickers, el fondo del contacto y los
 *                 detalles que marcan la piel. Tiene que aguantar texto claro.
 *   --rosa        el fondo suave: paneles, marcos y el reposo de las fotos.
 *   --blanco      el fondo base, casi blanco pero nunca blanco puro.
 *   --gris        el auxiliar frío: separadores y superficies neutras.
 *   --rojo-hondo  la versión oscura del que manda: textos sobre rosa y hover.
 *
 * "original" no tiene bloque: es la de arriba.
 * Se declaran en skins/paletas.ts, que es lo que lee el asistente.
 * ------------------------------------------------------------------------- */

/* Cacao · marrón cálido sobre crema tostada. La misma estructura, con la
   temperatura de un tono piel: funciona para cuidado corporal y cosmética
   natural, donde el rojo puede resultar demasiado cosmético. */
:root[data-paleta="cacao"] {
  --rosa:       #F3E7DD;
  --rojo:       #8C5A3C;
  --blanco:     #FFFCF9;
  --gris:       #EFEBE6;
  --rojo-hondo: #4A2E20;
}

/* Ciruela · morado profundo sobre malva. Es la más nocturna de las tres:
   perfumería, maquillaje de noche, fragancia. Mantiene el contraste del rojo
   original pero baja el grito. */
:root[data-paleta="ciruela"] {
  --rosa:       #F3E6EF;
  --rojo:       #7D3C6B;
  --blanco:     #FFFBFD;
  --gris:       #EDE8EC;
  --rojo-hondo: #43203A;
}