/* ============================================================
   主题 token（唯一来源）· C 版配色（镜流式清新绿）
   ------------------------------------------------------------
   浅色是主设计（默认）；深色只换 token，不动任何排版。
   规矩：组件样式里不许再写死浅色值，一律 var(--token)，
   否则深色一开就是「白卡片浮在黑底上」。新增颜色先在这里登记。

   C 版调色（参考镜流工作台截图）：暖白偏绿的底、白面板、
   鲜亮的草绿只做主操作与「可行动」信号，深绿黑的字。
   --btn-primary / --on-primary：主按钮的底与字。浅色要白字，所以按钮底用压深的绿
     （#4e7f1f，白字 4.8:1）；品牌亮绿 --brand 只做强调与描边，不当实心按钮底。
     深色模式反过来：亮绿底 + 深字（8:1），在黑底上更跳。

   切换方式：html[data-theme="dark"]（见 src/ui/theme.js，侧栏底部按钮）。
   ============================================================ */

:root {
  color-scheme: light;

  /* 底与面 */
  --bg: #f4f6ee;
  --panel: #ffffff;
  --panel2: #ffffff;
  --panel3: #edf1e3;
  --soft: #fafbf5;
  --soft2: #f7f9f0;
  --hover: #eef2e4;
  --track: #e6ead9;
  --field: #ffffff;
  --placeholder: #9aa48c;

  /* 线 */
  --line: #e1e6d3;
  --line2: #cdd6ba;
  --line3: #9aa48c;
  --line-soft: #edf0e3;

  /* 字 */
  --txt: #212b15;
  --txt2: #556147;
  --txt3: #8b9578;

  /* 品牌与语义色 */
  --brand: #74b62e;
  --on-brand: #1f2d08;
  /* 主按钮：白字配压深的绿（对比 4.8:1），品牌亮绿留给强调与描边 */
  --btn-primary: #4e7f1f;
  --on-primary: #ffffff;
  --brand-d: #edf5db;
  --line-brand: #cee0ab;
  --brand-2: #e9a13b;
  --brand-2d: #fdf3e0;
  --purple: #7c3aed;
  --purple-d: #f3ecff;
  --green: #3e8f4b;
  --green-d: #e8f5e9;
  --line-green: #c3e3c6;
  --amber: #9c6108;
  --amber-d: #fdf3dd;
  --line-amber: #eedcae;
  --red: #bd2f1f;
  --red-d: #fcecea;
  --line-red: #efc9c2;
  --blue: #2f66c4;
  --blue-d: #eaf1fc;
  --line-blue: #c9dcf5;

  /* 任务条左侧色条：浅色沿用品牌语义色 */
  --edge-making: #cdd6ba;
  --edge-published: #2f66c4;
  --edge-deployed: #9c6108;
  --edge-ok: #3e8f4b;
  --edge-failed: #bd2f1f;

  /* 块面色（卡片 / 日历 / 提示条） */
  --ok-bg: #fcfdf9;
  --bad-bg: #fdf7f5;
  --warn-bg: #fdfbf3;

  /* 阴影与遮罩 */
  --shadow: 0 1px 2px rgba(35, 45, 20, 0.05);
  --shadow-lg: 0 12px 40px rgba(35, 45, 20, 0.12);
  --scrim: rgba(24, 32, 14, 0.35);

  /* 图表（echarts 从这几个变量取色，见 views/admin/charts.js） */
  --chart-ink: #26301a;
  --chart-sub: #647054;
  --chart-faint: #97a187;
  --chart-line: #e3e7d6;
  --chart-grid: #eff2e6;
  --chart-amber: #ecc36c;
  --chart-orange: #e08f2f;
  --chart-loss: #e5e8da;
  --chart-loss-text: #6b7260;
  --chart-wait: #c2d2e6;
  --chart-wait-text: #5a6b7d;
  --chart-link: #dfe3d2;

  --mono: "SFMono-Regular", Consolas, Menlo, monospace;
}

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

  --bg: #10140c;
  --panel: #1a2013;
  --panel2: #1e2516;
  --panel3: #242b1a;
  --soft: #212817;
  --soft2: #1d2314;
  --hover: #262e1b;
  --track: #2a3320;
  --field: #1d2314;
  --placeholder: #67725a;

  --line: #2a3120;
  --line2: #3a4330;
  --line3: #5b6650;
  --line-soft: #232a19;

  --txt: #e4ecd8;
  --txt2: #a7b394;
  --txt3: #7d8870;

  --brand: #8cc63f;
  --on-brand: #16200a;
  /* 深色下亮绿底 + 深字（8:1），白字反而糊（2:1） */
  --btn-primary: #8cc63f;
  --on-primary: #16200a;
  --brand-d: rgba(140, 198, 63, 0.16);
  --line-brand: #3d4d24;
  --brand-2: #f0ad3f;
  --brand-2d: rgba(240, 173, 63, 0.16);
  --purple: #b492ff;
  --purple-d: rgba(180, 146, 255, 0.16);
  --green: #46cd8a;
  --green-d: rgba(70, 205, 138, 0.15);
  --line-green: #27513f;
  --amber: #e2a63c;
  --amber-d: rgba(226, 166, 60, 0.16);
  --line-amber: #4a3a22;
  --red: #ff7264;
  --red-d: rgba(255, 114, 100, 0.15);
  --line-red: #4d2b28;
  --blue: #79a2ff;
  --blue-d: rgba(121, 162, 255, 0.16);
  --line-blue: #2d3c58;

  /* 深色下卡片一律用中性面 */
  --ok-bg: #1a2013;
  --bad-bg: #201b1c;
  --warn-bg: #201e18;

  /* 左侧色条在深色里降饱和 */
  --edge-making: #3a4230;
  --edge-published: #4a72bd;
  --edge-deployed: #a87c33;
  --edge-ok: #2f8f63;
  --edge-failed: #b8523f;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
  --scrim: rgba(4, 6, 9, 0.62);

  --chart-ink: #dde5cf;
  --chart-sub: #9aa68e;
  --chart-faint: #7c886e;
  --chart-line: #333c2c;
  --chart-grid: #262d22;
  --chart-amber: #d8ab55;
  --chart-orange: #f0a04b;
  --chart-loss: #39422e;
  --chart-loss-text: #a2ad92;
  --chart-wait: #3a4a5e;
  --chart-wait-text: #9fb0c4;
  --chart-link: #38412e;
}

/* ---------- 深色下需要单独调的少数几处（渐变 / 固定色文字） ---------- */
html[data-theme="dark"] body {
  background: var(--bg);
}

html[data-theme="dark"] .login {
  background: radial-gradient(900px 480px at 50% -10%, #1a2013 0%, var(--bg) 62%);
}

html[data-theme="dark"] .login-card,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .card,
html[data-theme="dark"] .bar,
html[data-theme="dark"] .online,
html[data-theme="dark"] .qtree,
html[data-theme="dark"] .qcard,
html[data-theme="dark"] .rec,
html[data-theme="dark"] .todo-row,
html[data-theme="dark"] .radio-row,
html[data-theme="dark"] .mark-row,
html[data-theme="dark"] .tk-card,
html[data-theme="dark"] .ad-card,
html[data-theme="dark"] .dc-card,
html[data-theme="dark"] .step,
html[data-theme="dark"] .cal-cell,
html[data-theme="dark"] .seg,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .mxcell,
html[data-theme="dark"] .pick-list,
html[data-theme="dark"] .bind-list {
  border-color: var(--line);
}

html[data-theme="dark"] .ocr-card {
  background: linear-gradient(180deg, #201c12, var(--panel));
}

html[data-theme="dark"] .confirm-box p {
  color: #ffb4ab;
}

html[data-theme="dark"] .dc-notice {
  border-color: var(--line-amber);
  background: var(--warn-bg);
  color: #e5c98d;
}

html[data-theme="dark"] .dc-notice b {
  color: #f0d6a0;
}

html[data-theme="dark"] .modal-b code,
html[data-theme="dark"] code {
  background: var(--soft);
  border-color: var(--line);
}

/* 深色下图片/图标底：LOGO 是深色描边，垫一层浅底反而更清楚 */
html[data-theme="dark"] .logo-img {
  background: #f4f6f9;
}

/* 原生控件（日期选择器、滚动条）跟着走 */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #3a4330;
}