/* @import "../base-colors/palette-steps.css"; */

:where(html) {
  /* Primary */
  --primary: var(--teal); /* base color */
  --primary-contrast: var(--teal-contrast); /* Opposite of the base color; should be visible against the base color */
  --primary-shade: var(--teal-shade); /* slightly darker version of the base color */
  --primary-tint: var(--teal-tint);  /* slightly lighter version of the base color */
}

:where(.primary,
.primary-color) {
  color: var(--primary);
}
:where(.primary-weak,
.primary-weak-bg) {
  background-color: var(--primary-tint);
}
:where(.primary-bg) {
  background-color: var(--primary);
}
:where(.primary-fill) {
  fill: var(--primary);
}
:where(.primary-stroke) {
  stroke: var(--primary);
}