Most developers prefer to keep all their CSS custom properties in one place, and a pattern that has emerged in recent years is to put those on :root, a pseudo-class that targets the topmost element in your document (so that's always <html> on web pages). But just because they're in one place and in the topmost element, it doesn't mean they're global. I first encountered this issue with ::backdrop:
![:root isn’t global | Kilian Valkhof](https://cdn-ak-scissors.b.st-hatena.com/image/square/5522b7079935b531a2b355774738492386fb3b4c/height=288;version=1;width=512/https%3A%2F%2Fkilianvalkhof.com%2Fwp-content%2Fuploads%2Fog.jpg)