/*one example */
:root {
--main-color: #c06;
--accent-background: linear-gradient(to top, var(--main-color), white);
}
/*another example */
<one><two><three /></two></one>
one { --foo: 10px; }
two { --bar: calc(var(--foo) + 10px); }
three { --foo: calc(var(--bar) + 10px); }
