/* Light theme overrides */
[data-theme="light"] nav {
  background: rgba(245,246,250,.95) !important;
  border-bottom-color: var(--border);
}

[data-theme="light"] {
  --bg: #f5f6fa;
  --surface: #ffffff;
  --surface2: #eef0f6;
  --border: #e0e3ed;
  --text: #0d0d12;
  --muted: #52525b;
  --primary-glow: rgba(29,78,216,.12);
  background: var(--bg); /* фон на html-элементе → уходит в canvas */
}

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 34px;
  height: 34px;
  border-radius: var(--radius, 10px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
  padding: 0;
}
.theme-toggle:hover {
  border-color: var(--primary);
  color: var(--primary-light);
}
.theme-toggle svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* View Transition — circle reveal from toggle button */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: none;
    mix-blend-mode: normal;
  }
  ::view-transition-new(root) {
    animation: vc-reveal .3s ease-out both;
  }
  @keyframes vc-reveal {
    from { clip-path: circle(0% at var(--vt-x, 50%) var(--vt-y, 50%)); }
    to   { clip-path: circle(150% at var(--vt-x, 50%) var(--vt-y, 50%)); }
  }
}