CSS Variable Inheritance. How to do it right?

Question

css

The situation is the following. There is a CSS variable A which sets the color. This variable is used for another variable (B), which in turn is used to set the background color. If you change the color of variable A for a nested element, and specify that the background color of the element is equal to variable B, then the background color does not change. How to make it work. Do not ask why such frills - this is a greatly simplified scheme of the working system.

A demonstration of the problem can be viewed here

HTML

<div class="test-block bg-color">
  В этом пряугольнике должне быть красный цвет фона.
</div>

css

:root{
  --sf-color: #DBEDFF;
  --sf-test: var(--sf-color);
  background-color: var(--sf-test);
}

.bg-color{
  --sf-color: #FDAEB7;
  background-color: var(--sf-test);
}

.test-block{
  width: 100%;
  height: 50vh;
  border: 2px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

Answer 1

.bg-color{
  --sf-color: #FDAEB7;
  --sf-test: var(--sf-color);
  background-color: var(--sf-test);
}

Answer 2

the issue was resolved. solution here https://codepen.io/simai/pen/GRmjPrK