@property --chalk {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(218, 18%, 32%);
}

:root {
  --lightest-chalk: color-mix(in srgb, var(--chalk), var(--white) 95%);
  --lighter-chalk: color-mix(in srgb, var(--chalk), var(--white) 75%);
  --light-chalk: color-mix(in srgb, var(--chalk), var(--white) 50%);
  --dark-chalk: color-mix(in srgb, var(--chalk), var(--black) 50%);
  --darker-chalk: color-mix(in srgb, var(--chalk), var(--black) 75%);
  --darkest-chalk: color-mix(in srgb, var(--chalk), var(--black) 90%);
}

[background="lightest-chalk"] {
  --background: var(--lightest-chalk);
}

[background="lighter-chalk"] {
  --background: var(--lighter-chalk);
}

[background="light-chalk"] {
  --background: var(--light-chalk);
}

[background="chalk"] {
  --background: var(--chalk);
}

[background="dark-chalk"] {
  --background: var(--dark-chalk);
}

[background="darker-chalk"] {
  --background: var(--darker-chalk);
}

[background="darkest-chalk"] {
  --background: var(--darkest-chalk);
}

[color="lightest-chalk"] {
  --color: var(--lightest-chalk);
}

[color="lighter-chalk"] {
  --color: var(--lighter-chalk);
}

[color="light-chalk"] {
  --color: var(--light-chalk);
}

[color="chalk"] {
  --color: var(--chalk);
}

[color="dark-chalk"] {
  --color: var(--dark-chalk);
}

[color="darker-chalk"] {
  --color: var(--darker-chalk);
}

[color="darkest-chalk"] {
  --color: var(--darkest-chalk);
}