/* ═══════════════════════════════════════════════════════════════════════════
   themes.css — przełącznik motywów + płynne przejścia przy zmianie motywu.
   Kolory per motyw nie mieszkają tutaj: themes.js podmienia zmienne CSS
   (--accent, --overlay-a) i te przejścia je animują.
   ═══════════════════════════════════════════════════════════════════════════ */

/* crossfade dwóch elementów <video> w tle */
#bg video { transition: opacity 0.9s ease; }
#bg video.visible { opacity: 1; }

/* zmiana akcentu przemalowuje się płynnie zamiast skokowo */
#card,
.widget,
.link-btn,
.social svg,
.badge svg,
.w-tag,
.sp-bar i,
#avatar,
#username,
#bg-overlay {
  transition-property: background, background-color, border-color, box-shadow, color, fill, filter;
  transition-duration: 0.5s;
  transition-timing-function: ease;
}

/* ── Przełącznik motywów (prawy górny róg) ───────────────────────────────── */

#theme-switcher {
  top: 16px;
  right: 16px;
  gap: 7px;
}

.theme-dot {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 0.25);
  background: var(--sw, #888);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.theme-dot:hover { transform: scale(1.15); }

.theme-dot[aria-pressed="true"] {
  border-color: #fff;
  transform: scale(1.12);
  box-shadow: 0 0 8px color-mix(in srgb, var(--sw, #888) 80%, transparent);
}