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

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