document.addEventListener('DOMContentLoaded', function () {
  const root = document.documentElement;

  // Theme toggle
  const toggleBtn = document.getElementById('theme-toggle');

  function getCurrentTheme() {
    const attr = root.getAttribute('data-theme');
    if (attr) return attr;
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  }

  function updateIcon() {
    toggleBtn.textContent = getCurrentTheme() === 'dark' ? '☀' : '☾';
  }
  updateIcon();
  toggleBtn.addEventListener('click', function () {
    const next = getCurrentTheme() === 'dark' ? 'light' : 'dark';
    root.setAttribute('data-theme', next);
    localStorage.setItem('theme', next);
    updateIcon();
    document.dispatchEvent(new CustomEvent('themechange'));
  });

  // Accent toggle
  const accentToggleBtn = document.getElementById('accent-toggle');

  function getCurrentAccent() {
    return root.getAttribute('data-accent') === 'alt' ? 'alt' : 'default';
  }

  accentToggleBtn.addEventListener('click', function () {
    const next = getCurrentAccent() === 'alt' ? 'default' : 'alt';
    root.setAttribute('data-accent', next);
    localStorage.setItem('accent', next);
    document.dispatchEvent(new CustomEvent('themechange'));
  });

  // Font toggle
  const fontToggleBtn = document.getElementById('font-toggle');

  function getCurrentFont() {
    return root.getAttribute('data-font') === 'sans' ? 'sans' : 'serif';
  }

  fontToggleBtn.addEventListener('click', function () {
    const next = getCurrentFont() === 'sans' ? 'serif' : 'sans';
    root.setAttribute('data-font', next);
    localStorage.setItem('font', next);
  });
});