@property --yellow {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(62, 72.77%, 62.55%);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[light-color="dark-yellow"] {
  color: light-dark(var(--dark-yellow), var(--color));
}