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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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