/* ==========================================================================
   Theme switch — a circular sun/moon icon button that flips the page
   between light and dark in one click: sun in the light theme, moon in
   the dark one. Markup is built by theme-toggle.js.

   The button's own colours come from the --palette-* tokens below, scoped
   to [data-color-scheme]. The actual page theme is a separate axis:
   Framer owns the site's colors through its --token-* variables, so
   theme-toggle.js sets both — data-color-scheme for this button, --token-*
   for the page.

   Framer's own LYS/MØRK pill is kept in the layout but made invisible:
   its React bundle overwrites any DOM edit, but its geometry is still
   what this button positions itself against. Both live in normal document
   flow (position:absolute, not fixed) so they scroll away with the page.
   Shared by every page — self-hosted, doesn't depend on Framer's runtime.
   ========================================================================== */

/* ============================================================
   1. Tokens
   ============================================================ */
:root,
[data-color-scheme="light"] {
  --palette-text-primary: #141415;
  --palette-action-activeChannel: 0 0 0;
  --palette-action-hoverOpacity: 0.04;
}

[data-color-scheme="dark"] {
  --palette-text-primary: #f5f5f0;
  --palette-action-activeChannel: 255 255 255;
  --palette-action-hoverOpacity: 0.08;
}

[data-framer-name="Theme preference"] {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ============================================================
   2. The button — sun in light, moon in dark
   ============================================================ */
.appearance {
  position: absolute;
  z-index: 1300;
  display: inline-flex;
  width: 30px;
  height: 30px;
}

.appearance__trigger {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  padding: 5px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--palette-text-primary);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.appearance__trigger:hover {
  background-color: rgba(var(--palette-action-activeChannel) / var(--palette-action-hoverOpacity));
}

@media (hover: none) {
  .appearance__trigger:hover {
    background-color: transparent;
  }
}

.appearance__trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.appearance__trigger svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

[data-color-scheme="dark"] .appearance__trigger[data-icon="light"] {
  visibility: hidden;
}

[data-color-scheme="light"] .appearance__trigger[data-icon="dark"] {
  visibility: hidden;
}