(function () {
    const root = document.documentElement;
    const key = "theme";
    const stored = localStorage.getItem(key);
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
    const initial = stored || (prefersDark ? "mocha" : "latte");
    root.setAttribute("data-theme", initial);
    toggleChroma(initial);
  
    const btn = document.getElementById("theme-toggle");
    function updateToggleIcon(theme) {
      if (!btn) return;
      const isDark = theme === "mocha";
      btn.textContent = isDark ? "☀️" : "🌙";
      btn.setAttribute("aria-label", isDark ? "Switch to light theme" : "Switch to dark theme");
      btn.setAttribute("title", isDark ? "Light theme" : "Dark theme");
    }
    function setTheme(next) {
      root.setAttribute("data-theme", next);
      localStorage.setItem(key, next);
      toggleChroma(next);
      updateToggleIcon(next);
    }
    function toggleChroma(theme) {
      const latte = document.getElementById("chroma-latte");
      const mocha = document.getElementById("chroma-mocha");
      if (latte && mocha) {
        if (theme === "mocha") {
          mocha.removeAttribute("disabled");
          latte.setAttribute("disabled", "disabled");
        } else {
          latte.removeAttribute("disabled");
          mocha.setAttribute("disabled", "disabled");
        }
      }
    }
    updateToggleIcon(initial);
    btn && btn.addEventListener("click", () => {
      setTheme(root.getAttribute("data-theme") === "latte" ? "mocha" : "latte");
    });
  
    // Reading progress
    const bar = document.getElementById("progress");
    function onScroll() {
      const t = document.documentElement;
      const scrolled = (t.scrollTop / (t.scrollHeight - t.clientHeight)) * 100;
      bar && (bar.style.width = scrolled + "%");
    }
    document.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
  })();