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

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