@property --grey {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(0, 0%, 50%);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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