MOAR props!

:root, * {
  --brand: hotpink;
  --brand-highlight: color-mix(in oklab, var(--brand), white);
  --brand-shadow: color-mix(in oklab, var(--brand), black);
  --brand-gradient: linear-gradient(in oklab,
    var(--brand-highlight),
    var(--brand)
  );
}

vars made of vars made of vars, it's a pretty great reactive system