/* 設計權杖（CSS 變數）。深色為預設，data-theme="light" 覆寫。 */
:root,
:root[data-theme="dark"] {
  --bg-0: #0e1116;   /* 最底層（畫布背景） */
  --bg-1: #151a22;   /* 面板底 */
  --bg-2: #1c2530;   /* 卡片 / 輸入框 */
  --bg-3: #263140;   /* hover / 選取底 */
  --bg-elev: #202a36;/* 浮層 / modal */

  --border: #2b3949;
  --border-strong: #3d5063;

  --text-1: #e6edf3; /* 主要文字 */
  --text-2: #9fb0c0; /* 次要文字 */
  --text-3: #6b7c8d; /* 提示 / 佔位 */

  --accent: #4f8cff;
  --accent-2: #6ea2ff;
  --accent-fg: #ffffff;
  --accent-weak: rgba(79, 140, 255, 0.15);

  --danger: #ef4444;
  --danger-weak: rgba(239, 68, 68, 0.15);
  --warn: #f59e0b;
  --warn-weak: rgba(245, 158, 11, 0.15);
  --ok: #22c55e;
  --ok-weak: rgba(34, 197, 94, 0.15);

  /* 節點型別配色（與 renderGraph 共用） */
  --node-start:    #22c55e;
  --node-dialogue: #3b82f6;
  --node-choice:   #f59e0b;
  --node-branch:   #8b5cf6;
  --node-action:   #06b6d4;
  --node-jump:     #6b7280;
  --node-end:      #ef4444;

  --canvas-grid: rgba(255, 255, 255, 0.045);
  --canvas-grid-strong: rgba(255, 255, 255, 0.08);

  --radius: 8px;
  --radius-sm: 5px;
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 8px 30px rgba(0, 0, 0, 0.5);
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg-0: #eef1f5;
  --bg-1: #f7f9fc;
  --bg-2: #ffffff;
  --bg-3: #eaeef4;
  --bg-elev: #ffffff;

  --border: #d5dde6;
  --border-strong: #b9c5d1;

  --text-1: #131a22;
  --text-2: #4a5866;
  --text-3: #8695a4;

  --accent: #2f6fed;
  --accent-2: #1f5fe0;
  --accent-fg: #ffffff;
  --accent-weak: rgba(47, 111, 237, 0.12);

  --danger: #d92d20;
  --danger-weak: rgba(217, 45, 32, 0.1);
  --warn: #c77700;
  --warn-weak: rgba(199, 119, 0, 0.12);
  --ok: #12833c;
  --ok-weak: rgba(18, 131, 60, 0.12);

  --node-start:    #16a34a;
  --node-dialogue: #2563eb;
  --node-choice:   #d97706;
  --node-branch:   #7c3aed;
  --node-action:   #0891b2;
  --node-jump:     #64748b;
  --node-end:      #dc2626;

  --canvas-grid: rgba(20, 30, 45, 0.05);
  --canvas-grid-strong: rgba(20, 30, 45, 0.09);

  --shadow-1: 0 2px 8px rgba(30, 45, 70, 0.12);
  --shadow-2: 0 8px 30px rgba(30, 45, 70, 0.18);

  color-scheme: light;
}

body { background: var(--bg-0); color: var(--text-1); font-size: 14px; }