/* ==========================================================================
   浅色主题变量覆盖 + 主题切换过渡
   ========================================================================== */

html[data-theme="light"] {
  color-scheme: light;

  --bg: #f3f5fa;
  --bg-panel: #ffffff;
  --bg-elev: #ffffff;
  --bg-inset: #eef1f7;
  --bg-hover: #e9edf5;
  --bg-active: #e0e6f2;
  --canvas-bg: #e9edf5;
  --canvas-dot: rgba(51, 65, 85, 0.16);

  --border: #dde3ee;
  --border-strong: #b7c0d2;

  --text: #1b2333;
  --text-dim: #5a6478;
  --text-faint: #8a94a8;

  --accent: #5558e8;
  --accent-hover: #4f46e5;
  --accent-weak: rgba(85, 88, 232, 0.12);
  --accent-text: #4338ca;

  --success: #16a34a;
  --success-weak: rgba(22, 163, 74, 0.12);
  --warn: #d97706;
  --warn-weak: rgba(217, 119, 6, 0.12);
  --danger: #dc2626;
  --danger-weak: rgba(220, 38, 38, 0.1);

  --shadow-1: 0 2px 10px rgba(23, 37, 68, 0.09);
  --shadow-2: 0 18px 52px rgba(23, 37, 68, 0.2);
}

html[data-theme="light"] .btn-danger {
  color: #b91c1c;
}
html[data-theme="light"] .btn-danger:hover {
  color: #fff;
}
html[data-theme="light"] .chip-success {
  color: #15803d;
}
html[data-theme="light"] .chip-warn {
  color: #b45309;
}
html[data-theme="light"] .chip-danger {
  color: #b91c1c;
}
html[data-theme="light"] .color-swatch {
  background:
    linear-gradient(45deg, #d7dce8 25%, transparent 25%, transparent 75%, #d7dce8 75%) 0 0 / 10px 10px,
    linear-gradient(45deg, #d7dce8 25%, #f2f4f9 25%, #f2f4f9 75%, #d7dce8 75%) 5px 5px / 10px 10px;
}

/* 主题切换时主要界面元素的平滑过渡 */
#topbar,
.workspace,
.panel,
.modal-dialog,
.toast,
.btn,
.input,
.select,
.textarea,
.chip {
  transition:
    background-color 0.16s var(--ease),
    border-color 0.16s var(--ease),
    color 0.16s var(--ease);
}