CSS custom properties (variables) store reusable values with -- prefix: --primary-color: #8b5cf6. Access with var(): color: var(--primary-color).
Variables cascade and inherit. Define on :root for global scope. They can be overridden at any level, enabling component-specific theming.
Dark mode with CSS variables: define light values on :root, override with .dark class. One toggle switches the entire theme.
Dynamic values: set variables with JavaScript element.style.setProperty('--width', px). Use in calc(): width: calc(100% - var(--sidebar-width)).
Variables in media queries create responsive components. Combine with @property for animated custom properties with type, initial value, and inheritance control.
CSS variables are more powerful than preprocessors because they work at runtime, cascade naturally, and can be manipulated dynamically.