/* 课迹 KeJi 设计令牌（方向 A 暖毛配色 + B 足迹元素，2026-10-19 定）。
   扩展（popup / 浮窗 / 侧栏 / 笔记页）和课迹网页共用这一份；网页那边是复制过去的，改这里后要同步到
   sampledexe-site/public/keji/tokens.css。
   深色：默认跟系统；页面可以用 <html data-theme="light|dark"> 强制。
   :host 让页面里的 Shadow DOM（浮窗外壳、Alt+Shift+N 小浮层）也能直接用这份令牌。 */
:root, :host {
  /* 颜色：取自柯基 logo —— 奶油脸 #fff8ef、柯基毛 #e8913f、背景绿 #1f6f5c、眼睛 #1c2330 */
  --kj-bg: #fff8ef;          /* 面板底：奶油 */
  --kj-card: #ffffff;        /* 卡片 */
  --kj-field: #fffdf9;       /* 输入框 */
  --kj-soft: #fbeedd;        /* 浅底：状态条、分段控件、悬停 */
  --kj-line: #f1e1cc;        /* 分隔线、边框 */
  --kj-ink: #2b2118;         /* 正文：深棕 */
  --kj-mut: #7d6a56;         /* 次要文字（在 --kj-bg 上对比度 ≥ 4.5） */
  --kj-pri: #e8913f;         /* 主按钮：柯基橙 */
  --kj-pri-ink: #2b1606;     /* 主按钮上的字 */
  --kj-pri-edge: #c9732a;    /* 主按钮下沿 */
  --kj-accent: #ad5a14;      /* 橙色文字（倍速数字、标签） */
  --kj-green: #1f6f5c;       /* 森林绿：播放中、焦点框、链接 */
  --kj-paw: #e8913f;         /* 爪印 */
  --kj-paw-soft: #fdead3;    /* 爪印底 / 时间点底 */
  --kj-paw-trail: #efc79d;   /* 足迹虚线 */
  --kj-ts-ink: #9c500e;      /* 时间点文字 */
  --kj-warn: #a24f12;        /* 提示、出错 */
  --kj-toast-bg: #2b2118;
  --kj-toast-ink: #fff8ef;

  /* 字体：只用系统字体，不加载网络字体 */
  --kj-font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --kj-fs: 13.5px;           /* 面板正文 */
  --kj-fs-sm: 12px;          /* 标签、提示 */
  --kj-fs-title: 15px;       /* 「课迹」 */

  /* 圆角 */
  --kj-r-lg: 16px;           /* 卡片、浮窗 */
  --kj-r: 12px;              /* 状态条 */
  --kj-r-sm: 10px;           /* 输入框、图标按钮 */
  --kj-r-pill: 999px;        /* 按钮、时间点、提示 */

  /* 阴影 */
  --kj-shadow-card: 0 1px 0 #f1e1cc, 0 4px 14px rgba(160, 96, 32, .07);
  --kj-shadow-float: 0 12px 36px rgba(90, 50, 10, .22);
  --kj-shadow-toast: 0 4px 14px rgba(0, 0, 0, .18);

  /* 动效：只在用户操作后播一次，没有常驻动画；系统开了"减少动态效果"时全部关掉 */
  --kj-dur-fast: 160ms;      /* 悬停、按下、开关 */
  --kj-dur: 320ms;           /* 爪印落下 */
  --kj-dur-wag: 460ms;       /* 柯基晃头竖耳 */
  --kj-dur-toast: 1500ms;    /* 提示停留 */
  --kj-ease: cubic-bezier(.2, .8, .2, 1);
  --kj-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]), :host {
    --kj-bg: #1c1712; --kj-card: #261f18; --kj-field: #211b15; --kj-soft: #30271e; --kj-line: #3a2f24;
    --kj-ink: #f6ecdf; --kj-mut: #b4a08a; --kj-pri: #f0a050; --kj-pri-ink: #24140a; --kj-pri-edge: #b8702d;
    --kj-accent: #f3ae68; --kj-green: #6cc7ab; --kj-paw: #f0a050; --kj-paw-soft: #3b2b1b; --kj-paw-trail: #5c4430;
    --kj-ts-ink: #f6b673; --kj-warn: #f3ae68; --kj-toast-bg: #f6ecdf; --kj-toast-ink: #1c1712;
    --kj-shadow-card: 0 0 0 1px #33291f; --kj-shadow-float: 0 12px 36px rgba(0, 0, 0, .55);
  }
}
:root[data-theme="dark"] {
  --kj-bg: #1c1712; --kj-card: #261f18; --kj-field: #211b15; --kj-soft: #30271e; --kj-line: #3a2f24;
  --kj-ink: #f6ecdf; --kj-mut: #b4a08a; --kj-pri: #f0a050; --kj-pri-ink: #24140a; --kj-pri-edge: #b8702d;
  --kj-accent: #f3ae68; --kj-green: #6cc7ab; --kj-paw: #f0a050; --kj-paw-soft: #3b2b1b; --kj-paw-trail: #5c4430;
  --kj-ts-ink: #f6b673; --kj-warn: #f3ae68; --kj-toast-bg: #f6ecdf; --kj-toast-ink: #1c1712;
  --kj-shadow-card: 0 0 0 1px #33291f; --kj-shadow-float: 0 12px 36px rgba(0, 0, 0, .55);
}