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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

button[variant="red"] {
  --background-color: var(--red);
}