Vou dividir a resposta em duas parte, vamos lá
Primeira:
Sim pode e muito. A performance pode variar entre varios fatores,
Relacionar o item;
Quantidade de filhos que uma variavel atende;
Se ela é usada em uma div que contem 10000 outras div;
Se ela só possui um filho;
Incluir JS nessa equação vai gerar ainda mais delay no tempo de renderização.

Segunda:
A quantidade não importa tanto, mas sim onde vai ser usada e quanto elemento ela afeta, uma boa pratica seria definir variaveis para pontos chaves como textos alterando tamanho e fontes.
Caso seu objetivo for mesmo a performance você pode usar pré processadores de CSS simples e "leves" como STYLUS.
Referencias:
https://blog.jiayihu.net/css-custom-properties-performance-in-2018/
https://blog.teamtreehouse.com/getting-started-stylus
variáveis
?color: var(--example);
tem alguns caracteres a mais quecolor: red;
e isso pode aumentar osKBs
do seu.CSS
. Lógico que é um exemplo para casos extremos com um .CSS com mais de 10mil linhas etc... Talvez com um PostCSS ou Webpacker vc consiga configurar o output dessas variáveis