Разница между кастомными свойствами и переменными
В понятия "переменная" и "кастомное свойство" часто вкладывают один и тот же смысл, но на самом деле между ними есть разница. Шима Видас рассказал, чем они отличаются в статье "CSS custom properties are not variables".
В спецификации CSS эти два термина определяются так (моя интерпретация): "кастомное свойство" — это определение некоторого именованного значения, которое будет использоваться в будущем --primary-color: #fff, "переменная" — это механизм для получения по имени определённого ранее значения var(--primary-color). Такое отличие полезно, потому что благодаря ему мы можем говорить про "переменные с фоллбеком" var(--primary-color, #eee). У кастомных свойств, как и у любых других свойств, невозможно задать фоллбек. Также мы можем "определить кастомное свойство на элементе". Переменные в CSS не определяются, но используются в других свойствах.
В статье есть ещё несколько других примеров, рекомендую заглянуть.