(function(){
  const DEFAULT_THEME = 'light';
  const DEFAULT_ACCENT = '#1f4fff';

  function apply(){
    const theme = localStorage.getItem('sp_theme') || DEFAULT_THEME;
    const accent = localStorage.getItem('sp_accent') || DEFAULT_ACCENT;

    document.documentElement.dataset.theme = (theme === 'dark') ? 'dark' : 'light';
    document.documentElement.style.setProperty('--accent', accent);

    document.querySelectorAll('[data-action="theme"]').forEach(btn=>{
      btn.classList.toggle('active', btn.dataset.value === theme);
    });
    document.querySelectorAll('[data-action="accent"]').forEach(btn=>{
      btn.classList.toggle('active', btn.dataset.value === accent);
    });
  }

  document.addEventListener('click', (ev)=>{
    const el = ev.target.closest('[data-action]');
    if(!el) return;

    const action = el.dataset.action;
    const value = el.dataset.value;

    if(action === 'theme'){
      localStorage.setItem('sp_theme', (value === 'dark') ? 'dark' : 'light');
      apply();
    }
    if(action === 'accent'){
      localStorage.setItem('sp_accent', value || DEFAULT_ACCENT);
      apply();
    }
  });

  window.addEventListener('storage', (e)=>{
    if(e.key === 'sp_theme' || e.key === 'sp_accent') apply();
  });

  apply();
})();