Custom properties (CSS variables)

A custom property is a property whose name starts with two dashes, like --brand. It styles nothing by itself: it holds a value, and that value is inherited down the element tree. Follow one small stylesheet: two tokens declared on :root flow from html to every element, var() reads the value each button holds, a .card override recolours one branch, a fallback fills in a missing value, and changing one token restyles the whole page.