Yesterday, we learned about CSS variables. Today, I wanted to show you an advanced approach to working with them that I often use with client projects. Let’s dig in! Globals for system or theme defaults I like to scope design system or theme defaults to the :root element. This makes them accessible to every element and class in the design system. :root { /* Colors */ --color-primary: #0088cc; --color-secondary: rebeccapurple; --color-black: #272727; --color-white: #ffffff; /* Sizes */ --size-default: 1rem; --size-small: 0.