@import "tailwindcss";

/* 在 shadow DOM 内 :root 不匹配，用 :host 给 Web Component 自身定义主题 token。
   颜色名称跟主前端 frontend/src/index.css 保持一致——这样组件里的 bg-bg-card / text-accent
   等类名在插件 build 时也能解析到对应的 var()。 */
@theme {
  --color-bg-primary: var(--bg-primary);
  --color-bg-secondary: var(--bg-secondary);
  --color-bg-tertiary: var(--bg-tertiary);
  --color-bg-card: var(--bg-card);
  --color-bg-sidebar: var(--bg-sidebar);
  --color-bg-input: var(--bg-input);
  --color-bg-hover: var(--bg-hover);
  --color-bg-active: var(--bg-active);
  --color-bg-base: var(--bg-base);
  --color-border-primary: var(--border-primary);
  --color-border-secondary: var(--border-secondary);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-tertiary);
  --color-text-muted: var(--text-muted);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-light: var(--accent-light);
  --color-danger: var(--danger);
  --color-danger-bg: var(--danger-bg);
  --color-success: var(--success);
  --color-success-bg: var(--success-bg);
  --color-warning: var(--warning);
  --color-warning-bg: var(--warning-bg);
}

:host {
  /* light theme defaults — 跟主前端保持一致 */
  --bg-primary: #f2f0ed;
  --bg-secondary: #eae8e4;
  --bg-tertiary: #e0ddd8;
  --bg-card: #faf9f7;
  --bg-sidebar: #eae8e4;
  --bg-input: #f2f0ed;
  --bg-hover: rgba(255, 255, 255, 0.4);
  --bg-active: rgba(156, 175, 136, 0.08);
  --bg-base: #f2f0ed;
  --border-primary: #e0ddd8;
  --border-secondary: #eae8e4;
  --text-primary: #3d3d3d;
  --text-secondary: #5a5a5a;
  --text-tertiary: #8c8680;
  --text-muted: #b5afa8;
  --accent: #9caf88;
  --accent-hover: #8a9e78;
  --accent-light: rgba(156, 175, 136, 0.12);
  --danger: #c4917a;
  --danger-bg: rgba(196, 145, 122, 0.08);
  --success: #7a8e6a;
  --success-bg: rgba(122, 142, 106, 0.08);
  --warning: #c4a882;
  --warning-bg: rgba(196, 168, 130, 0.08);

  display: block;
  height: 100%;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 跟随系统/主前端的暗色主题：宿主元素加 [data-theme="dark"] 时切换 */
:host([data-theme="dark"]) {
  --bg-primary: #1c1b19;
  --bg-secondary: #232220;
  --bg-tertiary: #2d2b28;
  --bg-card: #252421;
  --bg-sidebar: #1e1d1b;
  --bg-input: #2d2b28;
  --bg-hover: rgba(255, 255, 255, 0.04);
  --bg-active: rgba(156, 175, 136, 0.1);
  --bg-base: #1c1b19;
  --border-primary: rgba(255, 255, 255, 0.06);
  --border-secondary: rgba(255, 255, 255, 0.03);
  --text-primary: #e8e6e3;
  --text-secondary: #c8c5c0;
  --text-tertiary: #a09c96;
  --text-muted: #7a7772;
  --accent: #a8bc94;
  --accent-hover: #b8caa6;
  --accent-light: rgba(156, 175, 136, 0.15);
  --danger: #d4a894;
  --danger-bg: rgba(196, 145, 122, 0.1);
  --success: #9caf88;
  --success-bg: rgba(156, 175, 136, 0.1);
  --warning: #c4a882;
  --warning-bg: rgba(196, 168, 130, 0.1);
}