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

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