---
// Light/dark toggle. The pre-paint script in Layout sets the initial theme;
// this just flips + persists it.
---

<button
  id="theme-toggle"
  class="theme-toggle"
  type="button"
  aria-label="Toggle colour theme"
  title="Toggle colour theme"
>
  <svg class="icon icon-sun" viewBox="0 0 24 24" aria-hidden="true" width="18" height="18">
    <circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="1.6" />
    <g stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
      <path d="M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M19.1 4.9l-1.8 1.8M6.7 17.3l-1.8 1.8" />
    </g>
  </svg>
  <svg class="icon icon-moon" viewBox="0 0 24 24" aria-hidden="true" width="18" height="18">
    <path
      d="M21 12.8A8.5 8.5 0 1 1 11.2 3a6.6 6.6 0 0 0 9.8 9.8Z"
      fill="none"
      stroke="currentColor"
      stroke-width="1.6"
      stroke-linejoin="round"
    />
  </svg>
</button>

<style>
  .theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-dim);
    cursor: pointer;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
  }
  .theme-toggle:hover {
    border-color: var(--accent-line);
    color: var(--text);
  }
  .icon {
    grid-area: 1 / 1;
  }
  /* Show the icon for the theme you'd switch TO. */
  :global([data-theme="dark"]) .icon-sun {
    display: block;
  }
  :global([data-theme="dark"]) .icon-moon {
    display: none;
  }
  :global([data-theme="light"]) .icon-sun {
    display: none;
  }
  :global([data-theme="light"]) .icon-moon {
    display: block;
  }
</style>

<!-- Toggle behaviour lives in /public/site.js (no inline JS → strict CSP). -->

