/* Composable surfaces: base color, tintable texture mask, then gradient highlight. */
.surface-layered {
  --surface-color: transparent;
  --surface-texture-image: url("assets/textures/colored-pencil-mask.svg");
  --surface-texture-color: currentColor;
  --surface-texture-opacity: .075;
  --surface-texture-size: 180px 180px;
  --surface-gradient: none;
  position: relative;
  isolation: isolate;
  background-color: var(--surface-color);
}
.surface-layered::before,
.surface-layered::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}
.surface-layered::before {
  background-color: var(--surface-texture-color);
  opacity: var(--surface-texture-opacity);
  -webkit-mask-image: var(--surface-texture-image);
  mask-image: var(--surface-texture-image);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: var(--surface-texture-size);
  mask-size: var(--surface-texture-size);
}
.surface-layered::after { background-image: var(--surface-gradient); }

/* Reusable texture tokens. Each source is an alpha mask, so its color is themeable. */
.texture-fine-grain { --surface-texture-image: url("assets/textures/fine-grain-mask.svg"); }
.texture-brushed-metal { --surface-texture-image: url("assets/textures/brushed-metal-mask.svg"); --surface-texture-size: 192px 128px; }
.texture-colored-pencil { --surface-texture-image: url("assets/textures/colored-pencil-mask.svg"); --surface-texture-size: 180px 180px; }
.texture-none { --surface-texture-image: none; --surface-texture-opacity: 0; }

/* Reusable gradient tokens. Override these custom properties for theme variants. */
.gradient-soft-top { --surface-gradient: linear-gradient(180deg, rgb(255 255 255 / .18), transparent 52%); }
.gradient-edge-fade { --surface-gradient: linear-gradient(135deg, rgb(255 255 255 / .14), transparent 55%, rgb(0 0 0 / .09)); }
.gradient-none { --surface-gradient: none; }

/* Example theme tokens (opt-in; no current screen is changed by these). */
.surface-evergreen {
  --surface-color: #24372f;
  --surface-texture-color: #b8c7ab;
  --surface-texture-opacity: .12;
  color: #f6f4eb;
}
.surface-stone {
  --surface-color: #e5e3db;
  --surface-texture-color: #455249;
  --surface-texture-opacity: .055;
  color: #25352e;
}