:root {
  --bg-base: #1a1a2e;
  --bg-surface: #16213e;
  --bg-hover: #1a2744;
  --text-primary: #eee;
  --text-strong: #fff;
  --text-muted: #888;
  --accent-red: #e94560;
  --accent-teal: #4ecdc4;
  --accent-yellow: #ffd166;
  --shadow-color: rgba(0, 0, 0, 0.4);
  --theme-toggle-bg: rgba(22, 33, 62, 0.86);
  --theme-toggle-border: rgba(78, 205, 196, 0.26);
  --canvas-bg: #1f1f38;
  --canvas-ink: #f4f8ff;
  --canvas-muted: #98a8c4;
  --canvas-line: #dfe7fd;
  --canvas-surface: #3c425e;
  --canvas-surface-line: #68708f;
}

:root[data-theme='light'] {
  --bg-base: #f7fbff;
  --bg-surface: #ffffff;
  --bg-hover: #eef5ff;
  --text-primary: #17324d;
  --text-strong: #17324d;
  --text-muted: #5f7894;
  --accent-red: #f25f72;
  --accent-teal: #22b8b0;
  --accent-yellow: #f4b942;
  --shadow-color: rgba(23, 50, 77, 0.14);
  --theme-toggle-bg: rgba(255, 255, 255, 0.9);
  --theme-toggle-border: rgba(34, 184, 176, 0.24);
  --canvas-bg: #edf5ff;
  --canvas-ink: #17324d;
  --canvas-muted: #6b86a3;
  --canvas-line: #8ea8c4;
  --canvas-surface: #d5e2f1;
  --canvas-surface-line: #9db2c9;
}

.theme-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--theme-toggle-border);
  border-radius: 999px;
  background: var(--theme-toggle-bg);
  color: var(--text-strong);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 30px var(--shadow-color);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  transform: translateY(-1px);
}

.theme-toggle__swatch {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-yellow), var(--accent-red));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}

@media (max-width: 560px) {
  .theme-toggle {
    top: 10px;
    right: 10px;
    padding: 9px 14px;
    font-size: 0.9rem;
  }
}