/* =========================================================
   ZAR AI v2 — THEME TOGGLE
   One reusable button component, instantiated in the compact
   panel and full-screen headers. All instances stay in sync via
   zar-v2-ui.js. This is a ZAR AI v2 preference control —
   it switches data-zar-v2-theme on the .zar-v2 root ONLY, never on
   :root/html/body (see tokens/themes.css).
========================================================= */

.zar-v2-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--zar-v2-space-1);

  width: 38px;
  height: 34px;
  border-radius: var(--zar-v2-radius-sm);
  border: 1px solid var(--zar-v2-border-subtle);
  background: var(--zar-v2-bg-surface);
  color: var(--zar-v2-text-secondary);

  transition: color var(--zar-v2-duration-fast) var(--zar-v2-ease-standard),
              border-color var(--zar-v2-duration-fast) var(--zar-v2-ease-standard);
}

.zar-v2-theme-toggle:hover {
  color: var(--zar-v2-text-primary);
  border-color: var(--zar-v2-border-strong);
}

.zar-v2-theme-toggle svg {
  width: 17px;
  height: 17px;
}

.zar-v2-theme-toggle__icon--sun { display: none; }
.zar-v2-theme-toggle__icon--moon { display: block; }

/* Icon reflects the CURRENT theme (moon showing = you're in
   dark mode) rather than the theme a click switches to — reads
   more clearly at this small size. The button's aria-label
   carries the authoritative "switch to …" action text. */
.zar-v2[data-zar-v2-theme="light"] .zar-v2-theme-toggle__icon--sun { display: block; }
.zar-v2[data-zar-v2-theme="light"] .zar-v2-theme-toggle__icon--moon { display: none; }