/* ============================================================================
   magpie-ui-tokens.css · 从 magpie 桌面端 UI 提取的配色 / 排版 / 阴影 token
   ----------------------------------------------------------------------------
   来源：yetone/magpie @ dcbae2ef（internal/gui/assets/app.css 第 1–108 行）
   提取日期：2026-10-29 · 提取方式：逐值抄写（非推断），变量名统一加 `--mp-` 前缀
   用途：给别的项目复刻 magpie 的「安静界面」质感——一层底色、白卡、很少的强调色。

   与上游的差异（只有两条，都为了复用得干净）：
   1. 变量名加 `--mp-` 前缀，避免和宿主项目的 `--bg` / `--fg` 撞车。
   2. 上游用 `:root[data-theme="dark"]` 与 `prefers-color-scheme` 双写，这里合并成
      `.mp-theme` 作用域 + `data-theme` 属性，宿主挂在任意容器上都行。

   注意：这不是「调色板灵感」，是上游实际值。改动任何一格就等于脱离原设计。
   ========================================================================== */

.mp-theme {
  /* —— 表面 —— */
  --mp-bg: #f4f4f6;
  --mp-card: #ffffff;
  --mp-card-2: #f9f9fb;          /* 展开后的编辑器底色 */
  --mp-pill: #f1f1f4;
  --mp-pill-hover: #e9e9ee;
  --mp-pop-bg: rgba(255, 255, 255, .94);

  /* 顶栏分段控件：轨道与滑块。轨道比 pill 再深一档，白滑块才立得住 */
  --mp-seg-track: #e6e6eb;
  --mp-seg-thumb: var(--mp-card);
  --mp-seg-edge: 0 1px 2px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .08);

  /* —— 文字 —— */
  --mp-fg: #1c1c21;
  --mp-fg-2: #4b4b53;
  --mp-muted: #85858d;
  --mp-faint: #b9b9c2;
  --mp-ctl-fg: #63636b;          /* 控件里的次级字，比 muted 深，保证 4.5:1 */

  /* —— 线与选中 —— */
  --mp-line: #e3e3e8;
  --mp-line-2: #ececf0;
  --mp-sel: #ecebfb;

  /* —— 唯一强调色 —— */
  --mp-accent: #4f46e5;
  --mp-accent-soft: #eeedfd;
  --mp-accent-fg: #ffffff;

  /* —— 语义色 —— */
  --mp-green: #189a58;  --mp-green-soft: #e4f6ec;
  --mp-red: #d64545;    --mp-red-soft: #fbe9e9;
  --mp-amber: #b45309;  --mp-amber-soft: #fbf0df;
  --mp-drift: #ce2c31;  --mp-drift-soft: #feebec;   /* 「已漂移」状态：可控的警报色 */

  /* —— 阴影：三层，最外一层是 0.5px 描边而不是第四层阴影 —— */
  --mp-shadow: 0 16px 44px rgba(20, 22, 30, .16), 0 2px 8px rgba(20, 22, 30, .06), 0 0 0 .5px rgba(20, 22, 30, .1);

  /* —— 字体：系统 UI 字体栈，Windows 单独换（见下） —— */
  --mp-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mp-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* —— 图表区分色（provider / agent / model） —— */
  --mp-c1: #4f46e5; --mp-c2: #0ea5e9; --mp-c3: #10b981; --mp-c4: #f59e0b;
  --mp-c5: #ec4899; --mp-c6: #8b5cf6; --mp-c7: #64748b;
}

/* 深色：跟系统，除非显式写了 data-theme="light" */
@media (prefers-color-scheme: dark) {
  .mp-theme:not([data-theme="light"]) {
    --mp-bg: #1a1a1e;
    --mp-card: #232327;
    --mp-card-2: #1f1f23;
    --mp-pill: #2d2d33;
    --mp-pill-hover: #36363d;
    --mp-pop-bg: rgba(38, 38, 43, .96);
    --mp-seg-track: rgba(255, 255, 255, .035);
    --mp-seg-thumb: rgba(255, 255, 255, .15);
    --mp-seg-edge: inset 0 .5px 0 rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .3);
    --mp-fg: #ededf1;
    --mp-fg-2: #b9b9c1;
    --mp-muted: #8b8b94;
    --mp-faint: #56565f;
    --mp-ctl-fg: #a1a1aa;
    --mp-line: #333339;
    --mp-line-2: #2c2c32;
    --mp-sel: #33345a;
    --mp-accent: #a5b4fc;
    --mp-accent-soft: #2b2c47;
    --mp-accent-fg: #14142a;
    --mp-green: #6fd99b;  --mp-green-soft: #1e3a2b;
    --mp-red: #f28b82;    --mp-red-soft: #45272a;
    --mp-amber: #f2b544;  --mp-amber-soft: #3f3220;
    --mp-drift: #ff9592;  --mp-drift-soft: #3b1219;
    --mp-shadow: 0 16px 44px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .3), 0 0 0 .5px rgba(255, 255, 255, .1);
    --mp-c1: #a5b4fc; --mp-c2: #7dd3fc; --mp-c3: #6ee7b7; --mp-c4: #fcd34d;
    --mp-c5: #f9a8d4; --mp-c6: #c4b5fd; --mp-c7: #94a3b8;
  }
}

/* 显式深色（不看系统） */
.mp-theme[data-theme="dark"] {
  --mp-bg: #1a1a1e; --mp-card: #232327; --mp-card-2: #1f1f23;
  --mp-pill: #2d2d33; --mp-pill-hover: #36363d; --mp-pop-bg: rgba(38, 38, 43, .96);
  --mp-seg-track: rgba(255, 255, 255, .035); --mp-seg-thumb: rgba(255, 255, 255, .15);
  --mp-seg-edge: inset 0 .5px 0 rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .3);
  --mp-fg: #ededf1; --mp-fg-2: #b9b9c1; --mp-muted: #8b8b94; --mp-faint: #56565f; --mp-ctl-fg: #a1a1aa;
  --mp-line: #333339; --mp-line-2: #2c2c32; --mp-sel: #33345a;
  --mp-accent: #a5b4fc; --mp-accent-soft: #2b2c47; --mp-accent-fg: #14142a;
  --mp-green: #6fd99b; --mp-green-soft: #1e3a2b;
  --mp-red: #f28b82; --mp-red-soft: #45272a;
  --mp-amber: #f2b544; --mp-amber-soft: #3f3220;
  --mp-drift: #ff9592; --mp-drift-soft: #3b1219;
  --mp-shadow: 0 16px 44px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .3), 0 0 0 .5px rgba(255, 255, 255, .1);
  --mp-c1: #a5b4fc; --mp-c2: #7dd3fc; --mp-c3: #6ee7b7; --mp-c4: #fcd34d;
  --mp-c5: #f9a8d4; --mp-c6: #c4b5fd; --mp-c7: #94a3b8;
}

/* Windows 用自己的字体族；中文用雅黑 UI，而不是 webview 的兜底 */
.mp-font-win { --mp-font: "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif; }
.mp-font-win { --mp-code: "Cascadia Mono", Consolas, "Microsoft YaHei UI", "Microsoft YaHei", monospace; }

/* ----------------------------------------------------------------------------
   排版与节奏（上游是硬编码在规则里的，这里抽成变量，值不变）
   上游正文字号 13px / 行高 1.4，控件 12–12.5px，圆角只有 5/6/7/8/12/14 六档。
   -------------------------------------------------------------------------- */
.mp-theme {
  --mp-text: 13px;
  --mp-text-sm: 12.5px;
  --mp-text-xs: 12px;
  --mp-leading: 1.4;
  --mp-radius-xs: 5px;
  --mp-radius-sm: 6px;
  --mp-radius-md: 7px;
  --mp-radius-lg: 8px;
  --mp-radius-xl: 12px;
  --mp-radius-2xl: 14px;
}

/* ----------------------------------------------------------------------------
   缓动：magpie 只用四条曲线 + 一条 damped spring。
   用法见 ../snippets/magpie-motion.css 与 05-沉淀/patterns/magpie-motion-language.md
   -------------------------------------------------------------------------- */
.mp-theme {
  --mp-ease: cubic-bezier(.22, 1, .36, 1);         /* 通用「快出慢收」，上游 --ease 的实际值 */
  --mp-ease-ios: cubic-bezier(.32, .72, 0, 1);     /* 模态/抽屉，iOS 手感 */
  --mp-ease-pop: cubic-bezier(.16, 1, .3, 1);      /* 弹出层，长尾柔落，不回弹 */
  --mp-ease-out-soft: cubic-bezier(.4, 0, .7, .2); /* 退出：先慢后快，像被吸回去 */
  --mp-ease-flap: cubic-bezier(.3, 0, .3, 1);      /* 标志小鸟的三段式抖动 */
}