:root pseudo-class
selector
Matches the root element of the document (same as html but with higher specificity). Ideal for CSS variables.
Syntax
:root { --variable: value; }
Example
css
:root {
/* Colors */
--color-primary: #3498db;
--color-success: #2ecc71;
--color-danger: #e74c3c;
/* Typography */
--font-base: 'Inter', sans-serif;
--font-size-base: 16px;
/* Spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
}