This page demonstrates how CSS custom properties, aka CSS variables, can have different values within different scopes, where a scope is defined by a CSS selection rule.

This paragraph is inside an article (body > article > p)

This paragraph is inside a section, which is inside an article (body > article > section > p)

This paragraph is inside a section with class="highlighted", which is inside an article (body > article > section.highlighted > p)