What are CSS custom properties (variables) and what benefits do they offer?

Explanation

CSS custom properties (--name: value) are native CSS variables that offer several advantages over preprocessor variables: they are dynamic (changeable at runtime via JavaScript), inheritable, scoped to the element they are defined on, and can store any CSS value. They enable runtime theming (dark mode), responsive design without media query duplication, and simplified maintenance. Access via var(--name, fallback) in CSS and element.style.setProperty in JavaScript. Custom properties are widely supported in modern browsers.