/* css */
/* can be any HTML element not only ROOT */
:root {
  --phone: 50px;
  --tablet: 800px;
  

}

#test {
  background: red;
  height: 50px;
  width: var(--phone);
}

/* js */
const breakpointsData = document.querySelector(':root');

const phone = getComputedStyle(breakpointsData)
    .getPropertyValue('--phone');


setTimeout(() => {
  breakpointsData.style
    .setProperty('--phone', '100px');
}, 1000)