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

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