Custom properties inherit, so a section can bring its own values.

Custom properties inherit, the way color does. An element gets every token its parent has, and passes them on to its children. That is why tokens on :root reach the whole page.

Set the same token again on one element and you change it for that element and everything inside it, nothing else. That area is the token's scope.

So you write a component once, reading var(--accent), and a wrapper like .promo sets a different --accent. Same rules, new look, no extra selectors.

<a class="btn" href="https://example.com/a">Read more</a>
<div class="promo">
  <a class="btn" href="https://example.com/b">Get 20% off</a>
</div>

:root {
  --accent: teal;
}
.promo {
  --accent: crimson;
}
.btn {
  padding: 8px 16px;
  color: white;
  background-color: var(--accent);
}

The .btn rule never changes. Only the value it reads does.