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

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