CSS variables: Scoping

CSS variables, also known as custom properties, function similarly to variables in programming languages, allowing for the declaration and consumption of values within CSS rulesets. These variables, defined using a double hyphen syntax (e.g., --varName), enable the application of consistent styling across different elements by using the `var()` function to retrieve and apply their values. The scope of CSS variables is determined by where they are declared in the CSS hierarchy, with global variables declared in the `:root` selector being accessible throughout the entire document. Local variables are scoped to their parent element and its children, ensuring modularity and facilitating theming without requiring multiple stylesheets. CSS variables are supported by major browsers, though older versions may lack compatibility, and fallback values can be implemented to ensure consistent styling across different environments. The hoisting feature of CSS variables allows them to be utilized before they are declared, enhancing their flexibility and power in creating clean and efficient design systems.