/* Demo-only: swatches expose hex in data-swatch; paint each known color.
   Dynamic style binding is still missing. */

@layer utilities {
.color-field__swatch[data-swatch="#ce422b"] {
  background-color: #ce422b;
}

.color-field__swatch[data-swatch="#d81b60"] {
  background-color: #d81b60;
}

.color-field__swatch[data-swatch="#8e24aa"] {
  background-color: #8e24aa;
}

.color-field__swatch[data-swatch="#5e35b1"] {
  background-color: #5e35b1;
}

.color-field__swatch[data-swatch="#3949ab"] {
  background-color: #3949ab;
}

.color-field__swatch[data-swatch="#1e88e5"] {
  background-color: #1e88e5;
}

.color-field__swatch[data-swatch="#039be5"] {
  background-color: #039be5;
}

.color-field__swatch[data-swatch="#00acc1"] {
  background-color: #00acc1;
}

.color-field__swatch[data-swatch="#00897b"] {
  background-color: #00897b;
}

.color-field__swatch[data-swatch="#43a047"] {
  background-color: #43a047;
}

.color-field__swatch[data-swatch="#fbc02d"] {
  background-color: #fbc02d;
}

.color-field__swatch[data-swatch="#fb8c00"] {
  background-color: #fb8c00;
}

.demo-decor__mark.asset-icon {
  width: 2.5rem;
  height: 2.5rem;
  opacity: 0.92;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 14px rgb(0 0 0 / 40%));
}

.demo-decor__mark .asset-icon__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
}