Когда вы пишите:
--mainColorHover: rgba(var(--mainColor), 0.5)
Css интерпретирует это как:
--mainColorHover: rgba(#28bebd, 0.5)
А теперь прочитайте документацию про rgba. Можно ли использовать такой формат?
Вам нужно переписать свойство --mainColor в валидном формате для rgba:
--mainColor: 0, 0, 0 // или любой другой цвет rgb