CSS переменная не определяется

Я определяю переменные цветов и потом совмещаю их в другой переменной, вставляя эту переменную в контейнер, я получаю все еще зеленый цвет, хотя я перезаписываю одну из них в потомке и должен получить по итогу синий цвет, но почему-то --hsl не видит, что я перезаписал переменную --h по каскаду. Как это работает? Что я делаю не так?

:root {
  --h: 100;
  --s: 50%;
  --l: 50%;
  --hsl: hsl(var(--h), var(--s), var(--l));
}

.colored {
  width: 600px;
  height: 600px;
  --h: 200;
  background-color: var(--hsl);
}

<div class="colored"></div>