CSS custom properties (variáveis)
Variáveis nativas do CSS — declaradas com --nome e usadas com var(--nome). Ao contrário das variáveis de pré-processador (Sass), elas existem no navegador em tempo de execução: herdam pela cascata, podem ser alteradas via JavaScript e são recalculadas dinamicamente.
Diferença em relação às variáveis do Sass: as do Sass são estáticas e desaparecem na compilação. As custom properties do CSS são "vivas" — existem no DOM, são herdadas pelos elementos filhos (defina --accent no :root e qualquer elemento pode lê-la), podem ser alteradas por elemento ou via media queries, e lidas/escritas via JS (style.setProperty). Casos de uso: temas (trocar entre claro/escuro alterando algumas variáveis), design tokens (um lugar central para cores/espaçamentos), estilos dinâmicos que reagem a estado, e passar valores do JS para o CSS. Combina muito bem com calc() e clamp(). Suportado em todo lugar há muito tempo. Um dos recursos modernos de CSS mais usados e a espinha dorsal dos design systems. Relacionado a clamp() e cascade layers.