/* Single-treatment decorative backdrops. Keep these low-contrast and isolated. */
.texture-surface {
  background-image: var(--texture-image) !important;
  background-repeat: no-repeat !important;
  background-position: top right !important;
  background-size: min(32rem, 60vw) 24rem !important;
  background-blend-mode: soft-light !important;
}

/* Full-page tiled textures — overrides the base no-repeat/corner placement
   so small repeating patterns (felt, paper, graphite dots, etc.) tile across
   the entire background. Use alongside .texture-surface and a texture variant. */
.texture-tiled {
  background-repeat: repeat !important;
  background-position: top left !important;
  background-attachment: fixed !important;
  background-size: auto !important;
}

.texture-surface--felt {
  --texture-image: radial-gradient(
    circle,
    rgb(232 219 193 / 9%) 0.7px,
    transparent 1px
  );
  background-size: 7px 7px !important;
}

.texture-surface--fluted-glass {
  --texture-image: repeating-linear-gradient(
    90deg,
    rgb(255 255 255 / 5%) 0 2px,
    transparent 2px 12px
  );
}

.texture-surface--thermal-gradients {
  --texture-image:
    radial-gradient(ellipse at 74% 24%, rgb(221 130 62 / 16%), transparent 48%),
    radial-gradient(ellipse at 44% 88%, rgb(109 91 164 / 12%), transparent 55%);
}

.texture-surface--water-ripples {
  --texture-image: repeating-radial-gradient(
    ellipse at 78% 24%,
    transparent 0 10px,
    rgb(107 190 190 / 10%) 11px 12px,
    transparent 13px 22px
  );
}

.texture-surface--speckled-graphite {
  --texture-image: radial-gradient(
    circle,
    rgb(236 226 207 / 13%) 0.8px,
    transparent 1.1px
  );
  background-size: 11px 11px !important;
}

.texture-surface--single-hue-landscapes {
  --texture-image:
    linear-gradient(
      160deg,
      transparent 55%,
      rgb(145 177 165 / 12%) 55% 67%,
      transparent 67%
    ),
    linear-gradient(
      18deg,
      transparent 62%,
      rgb(145 177 165 / 9%) 62% 74%,
      transparent 74%
    );
}

.texture-surface--blueprint-grids {
  --texture-image:
    linear-gradient(rgb(96 164 203 / 9%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(96 164 203 / 9%) 1px, transparent 1px);
  background-size: 18px 18px !important;
}

.texture-surface--halftone {
  --texture-image: radial-gradient(
    circle,
    rgb(217 177 109 / 20%) 1px,
    transparent 1.4px
  );
  background-size: 8px 8px !important;
}

.texture-surface--grainy-gradients {
  --texture-image:
    radial-gradient(ellipse at 78% 22%, rgb(206 134 93 / 14%), transparent 52%),
    radial-gradient(circle, rgb(236 226 207 / 8%) 0.55px, transparent 0.9px);
  background-size:
    auto,
    4px 4px !important;
}

.texture-surface--grass-texture {
  --texture-image: repeating-linear-gradient(
    108deg,
    transparent 0 8px,
    rgb(129 164 116 / 8%) 9px 10px,
    transparent 11px 17px
  );
}

.texture-surface--dithered-images {
  --texture-image: repeating-conic-gradient(
    rgb(232 219 193 / 9%) 0% 25%,
    transparent 0% 50%
  );
  background-size: 6px 6px !important;
}

.texture-surface--paper-texture {
  --texture-image: radial-gradient(
    circle,
    rgb(190 164 125 / 10%) 0.6px,
    transparent 1px
  );
  background-size: 5px 5px !important;
}

.texture-surface--contour-lines {
  --texture-image: repeating-radial-gradient(
    ellipse at 82% 18%,
    transparent 0 13px,
    rgb(179 154 203 / 9%) 14px 15px,
    transparent 16px 27px
  );
}

.texture-surface--cloud-sky {
  --texture-image:
    radial-gradient(
      ellipse at 70% 28%,
      rgb(166 193 207 / 15%),
      transparent 35%
    ),
    radial-gradient(ellipse at 93% 48%, rgb(166 193 207 / 10%), transparent 27%);
}

.texture-surface--pixel-mosaics {
  --texture-image: repeating-conic-gradient(
    from 0deg,
    rgb(174 144 114 / 8%) 0% 25%,
    transparent 0% 50%
  );
  background-size: 16px 16px !important;
}

.texture-surface--lens-distortion {
  --texture-image: radial-gradient(
    ellipse at 74% 32%,
    transparent 0 18%,
    rgb(178 158 194 / 10%) 19% 20%,
    transparent 21% 31%,
    rgb(178 158 194 / 7%) 32% 33%,
    transparent 34%
  );
}

.texture-surface--stippled-gradients {
  --texture-image: radial-gradient(
    circle,
    rgb(205 157 105 / 12%) 0.75px,
    transparent 1px
  );
  background-size: 5px 5px !important;
}

.texture-surface--square-dot-grids {
  --texture-image: radial-gradient(
    circle,
    rgb(135 171 170 / 15%) 1px,
    transparent 1.2px
  );
  background-size: 14px 14px !important;
}

.texture-surface--blurred-photos {
  --texture-image:
    radial-gradient(ellipse at 78% 18%, rgb(141 107 88 / 17%), transparent 34%),
    radial-gradient(ellipse at 94% 48%, rgb(110 136 125 / 13%), transparent 30%);
}

.texture-surface--iridescent-shapes {
  --texture-image:
    radial-gradient(
      ellipse at 82% 22%,
      rgb(171 134 196 / 15%),
      transparent 29%
    ),
    radial-gradient(ellipse at 65% 58%, rgb(97 164 163 / 11%), transparent 32%);
}

.texture-surface--ascii-and-pixels {
  --texture-image:
    repeating-linear-gradient(
      0deg,
      transparent 0 7px,
      rgb(138 174 158 / 9%) 7px 8px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 7px,
      rgb(138 174 158 / 7%) 7px 8px
    );
  background-size: 8px 8px !important;
}

/* Impressionist paintings — soft, blended color washes like canvas strokes */
.texture-surface--impressionist-paintings {
  --texture-image:
    radial-gradient(ellipse at 20% 30%, rgb(167 139 250 / 10%), transparent 40%),
    radial-gradient(ellipse at 80% 70%, rgb(34 211 238 / 8%), transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgb(251 146 60 / 6%), transparent 60%);
}