@property --orange {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(36, 72%, 46%);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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