<h2>Debug CSS variables:</h2>

<div>
  <button class="alert-value">
Alert '--screen-category' variable value
</button>
</div>
<div>
  <button class="set-value">
Set '--screen-category' variable value to:
</button>
  <input type="text" class="var-value" value="custom" />
</div>

<div>
  <button class="set-value-from-var">
Set '--screen-category' variable from '--default-screen-category'
</button>
</div>

:root {
    --default-screen-category: 'default-screen-category';
  }

@media screen and (max-width: 1024px) {
  :root {
    --screen-category: 'tablet';
  }
}

@media screen and (max-width: 640px) {
  :root {
    --screen-category: 'phone';
  }
}

@media screen and (min-width: 1025px) {
  :root {
    --screen-category: 'desktop';
  }
}

body:after {
  content: '--screen-category : 'var(--screen-category);
}

document.querySelector('.alert-value').addEventListener('click', () => {
  const rootStyles = getComputedStyle(document.documentElement);
  const varValue = rootStyles.getPropertyValue('--screen-category').trim();
  alert(varValue);
});

const inputEl = document.querySelector('.var-value');
document.querySelector('.set-value').addEventListener('click', () => {
  document.documentElement.style.setProperty('--screen-category', `'${inputEl.value}'`);
});

document.querySelector('.set-value-from-var').addEventListener('click', () => {
  document.documentElement.style.setProperty('--screen-category', 'var(--default-screen-category)');
});