h2 {
  --lighten: 50%;
  color: hsl(240, 100%, var(--lighten, 50%));
}

h2.darker {
  --lighten: 80%;
}

And to be able to animate --lighten with transition, you need to add this:

@property --lighten {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}