/* tokens/patterns.css — tramas generadas con CSS, peso cero.
   Para el fondo repetido de una pieza. Las texturas dibujadas
   (espiral, mancha, recortes) viven en assets/textures/ como SVG. */

:root {
  --trama-color:   currentColor;
  --trama-punto:   14px;   /* distancia entre centros */
  --trama-radio:   3px;    /* tamaño del punto */
  --trama-raya:    18px;   /* ancho del par de rayas */
}

/* Semitono uniforme: la trama pop por defecto */
.trama-puntos {
  background-image: radial-gradient(var(--trama-color) var(--trama-radio), transparent var(--trama-radio));
  background-size: var(--trama-punto) var(--trama-punto);
}

/* Semitono al tresbolillo: retícula real de impresión, más orgánica */
.trama-puntos-offset {
  background-image:
    radial-gradient(var(--trama-color) var(--trama-radio), transparent var(--trama-radio)),
    radial-gradient(var(--trama-color) var(--trama-radio), transparent var(--trama-radio));
  background-size: var(--trama-punto) var(--trama-punto);
  background-position: 0 0, calc(var(--trama-punto) / 2) calc(var(--trama-punto) / 2);
}

/* Rayas diagonales a 45° */
.trama-rayas {
  background-image: repeating-linear-gradient(45deg,
    var(--trama-color) 0, var(--trama-color) calc(var(--trama-raya) / 2),
    transparent calc(var(--trama-raya) / 2), transparent var(--trama-raya));
}

/* Cuadrícula de mantel: el guiño kitsch */
.trama-cuadros {
  background-image:
    repeating-linear-gradient(0deg, var(--trama-color) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(90deg, var(--trama-color) 0 8px, transparent 8px 16px);
  background-blend-mode: multiply;
}

/* Degradado de semitono: el punto crece hacia un lado */
.trama-degradada {
  background-image: radial-gradient(var(--trama-color) 40%, transparent 41%);
  background-size: var(--trama-punto) var(--trama-punto);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
          mask-image: linear-gradient(to bottom, #000, transparent);
}

/* Densidades */
.trama-fina   { --trama-punto: 8px;  --trama-radio: 1.5px; }
.trama-media  { --trama-punto: 14px; --trama-radio: 3px; }
.trama-gruesa { --trama-punto: 24px; --trama-radio: 6px; }

/* ── Duotono ───────────────────────────────────────────────────────
   Lleva una fotografía o ilustración a dos colores de la paleta.
   La escena del ring ya viene con tres duotonos resueltos como
   archivo; esta utilidad es para imágenes nuevas.                  */
.duotono {
  position: relative;
  background-color: var(--duo-sombra, var(--morado-900));
  isolation: isolate;
  overflow: hidden;
}
.duotono > img {
  display: block; width: 100%;
  filter: grayscale(1) contrast(1.08);
  mix-blend-mode: screen;
}
.duotono::after {
  content: ""; position: absolute; inset: 0;
  background-color: var(--duo-luz, var(--arena-100));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.duotono-magenta  { --duo-sombra: var(--morado-900); --duo-luz: var(--magenta-500); }
.duotono-turquesa { --duo-sombra: var(--morado-900); --duo-luz: var(--turquesa-200); }
.duotono-crema    { --duo-sombra: var(--morado-900); --duo-luz: var(--arena-100); }