:where(html) { 
  /* success */
  --success: var(--green); /* base color */
  --success-contrast: var(--green-contrast); /* Opposite of the base color; should be visible against the base color */
  --success-shade: var(--green-shade); /* slightly darker version of the base color */
  --success-tint: var(--green-tint);  /* slightly lighter version of the base color */
  --success-text-color: var(--success); /* text color */
  --success-border-color: var(--success); /* border color */
  --success-weak: var(--success-tint);
}

.success,
.success-color {
  color: var(--success);
}
.success-weak,
.success-weak-bg {
  background-color: var(--success-tint);
}
.success-bg {
  background-color: var(--success);
}
.success-fill {
  fill: var(--success);
}
.success-stroke {
  stroke: var(--success);
}
.success-box {
  color: var(--success-contrast);
  background-color: var(--success);
  border: var(--border-width-base) var(--border-style-base) var(--success);
  border-radius: var(--border-radius-sharp);
}