@property --green {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(150, 100%, 40%);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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