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

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