/* 设计令牌：所有颜色、字体、间距、圆角、高度只在这里定义。
   其他 CSS 只能引用 var(--xxx)，不允许出现裸色值和魔法数字。 */

:root {
  color-scheme: light dark;

  /* 色彩：中性暖灰。界面基本是黑白灰，彩色只用来表示状态 */
  --paper: #ffffff;        /* 内容区底色 */
  --surface: #ffffff;      /* 面板、输入框 */
  --surface-2: #f6f6f4;    /* 悬停底、下沉区域、当前行 */
  --surface-3: #ecece9;    /* 分段选择轨道、按下 */
  --sidebar: #f8f8f6;      /* 侧边栏底 */
  --sidebar-hover: #efefec;
  --sidebar-active: #e7e7e3;
  --ink: #1f1e1c;          /* 正文 */
  --ink-2: #5c5b57;        /* 次要文字 */
  --ink-3: #75746f;        /* 提示、占位 */
  --line: #ebebe8;         /* 分隔线 */
  --line-strong: #d9d8d4;  /* 控件边框 */

  --primary: #1f1e1c;      /* 主操作：深色实心 */
  --primary-hover: #3a3936;
  --primary-press: #000000;
  --on-primary: #ffffff;

  --run: #2f6fde;          --run-soft: #eaf1fd;   /* 进行中 */
  --ok: #2e7d5b;           --ok-soft: #e8f3ee;    /* 完成 */
  --err: #c2412f;          --err-soft: #fbeeeb;   /* 失败 */
  --on-err: #ffffff;
  --wait: #6b6a65;         --wait-soft: #f0f0ee;  /* 排队/已取消 */

  --focus: #a8a7a2;
  --focus-soft: rgba(31, 30, 28, 0.08);
  --overlay: rgba(31, 30, 28, 0.4);
  --badge-bg: rgba(0, 0, 0, 0.62);
  --badge-fg: #ffffff;

  /* 字体：系统字体，中文走苹方 / 微软雅黑 */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI",
          "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 600;
  --lh-body: 1.6;
  --lh-tight: 1.35;

  /* 间距：4px 网格 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* 圆角 */
  --r-s: 6px;    /* 缩略图、标签 */
  --r-m: 8px;    /* 按钮、输入框 */
  --r-l: 12px;   /* 面板、粘贴框 */
  --r-xl: 14px;  /* 对话框 */

  /* 控件高度 */
  --h-sm: 28px;
  --h-ctl: 34px;
  --h-hero: 48px;
  --h-chip: 20px;

  --bw: 1px;
  --bw-strong: 1px;

  --content-w: 960px;
  --topbar-h: 52px;
  --sidebar-w: 232px;
  --stick-top: var(--s-5);  /* 吸顶元素离视口顶部的距离；窄屏有顶栏时在 app.css 覆盖 */
  --ed-bar-h: 48px;         /* 字幕编辑器顶部工具条高度 */
  --stage: #141311;         /* 预览窗底色，深浅模式都一样 */
  --stage-ink: #ffffff;
  --accent: #d98a1c;        /* 编辑器里的重点色：当前句、播放线、未保存 */
  --accent-soft: #fbefd9;

  --t-fast: 120ms;
  --shadow-sm: 0 1px 2px rgba(31, 30, 28, 0.08);    /* 分段选择的选中项 */
  --shadow-pop: 0 8px 28px rgba(31, 30, 28, 0.14);  /* 对话框、菜单、提示条 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #262624;
    --surface: #262624;
    --surface-2: #30302d;
    --surface-3: #3a3a37;
    --sidebar: #1f1f1d;
    --sidebar-hover: #2b2b28;
    --sidebar-active: #343431;
    --ink: #eceae5;
    --ink-2: #b8b6b0;
    --ink-3: #98968f;
    --line: #383835;
    --line-strong: #4a4945;

    --primary: #eceae5;
    --primary-hover: #ffffff;
    --primary-press: #d4d2cc;
    --on-primary: #1f1e1c;

    --run: #8db4ff;   --run-soft: #24324a;
    --ok: #6fc9a0;    --ok-soft: #21352c;
    --err: #ff9c8c;   --err-soft: #40261f;
    --on-err: #1f1e1c;
    --wait: #aeaca6;  --wait-soft: #33332f;

    --focus: #77756f;
    --focus-soft: rgba(236, 234, 229, 0.1);
    --accent: #f0a83a;
    --accent-soft: #3a2d17;
    --overlay: rgba(0, 0, 0, 0.55);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.45);
  }
}

/* 字幕编辑器有三套外观：深色（默认）、浅色、跟随系统，重点色都是蓝。
   用 #page-edit 上的 data-theme 切换，不影响其它页面。 */
.page.ed[data-theme="light"], .page.ed[data-theme="auto"] {
  color-scheme: light;
  --ed-bg: #e6e8ec;
  --paper: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f3f6;
  --surface-3: #e4e7ec;
  --ink: #15171b;
  --ink-2: #3f444c;
  --ink-3: #5d636d;
  --line: #d5d8de;
  --line-strong: #c3c8d0;
  --primary: #2f6fe4;
  --primary-hover: #3f7cf0;
  --primary-press: #2559c4;
  --on-primary: #ffffff;
  --accent: #2f6fe4;
  --accent-soft: #e7efff;
  --run: #2f6fde;
  --err: #c2412f;
  --err-soft: #fbeeeb;
  --focus: #a3a9b3;
  --focus-soft: rgba(47, 111, 228, 0.14);
  --wave: rgba(47, 111, 228, 0.45);
}
.page.ed[data-theme="dark"] {
  color-scheme: dark;
  --ed-bg: #101114;
  --paper: #1a1c21;
  --surface: #22252b;
  --surface-2: #20232a;
  --surface-3: #2a2e36;
  --ink: #eceef2;
  --ink-2: #c3c8d0;
  --ink-3: #9aa0ab;
  --line: #2c3038;
  --line-strong: #3a3f48;
  --primary: #4c8dff;
  --primary-hover: #6a9fff;
  --primary-press: #3a78e6;
  --on-primary: #ffffff;
  --accent: #4c8dff;
  --accent-soft: rgba(76, 141, 255, 0.16);
  --run: #8db4ff;
  --err: #ff8a7a;
  --err-soft: #3a2420;
  --focus: #5a6170;
  --focus-soft: rgba(76, 141, 255, 0.18);
  --wave: rgba(111, 157, 255, 0.62);
}
@media (prefers-color-scheme: dark) {
  .page.ed[data-theme="auto"] {
  color-scheme: dark;
  --ed-bg: #101114;
  --paper: #1a1c21;
  --surface: #22252b;
  --surface-2: #20232a;
  --surface-3: #2a2e36;
  --ink: #eceef2;
  --ink-2: #c3c8d0;
  --ink-3: #9aa0ab;
  --line: #2c3038;
  --line-strong: #3a3f48;
  --primary: #4c8dff;
  --primary-hover: #6a9fff;
  --primary-press: #3a78e6;
  --on-primary: #ffffff;
  --accent: #4c8dff;
  --accent-soft: rgba(76, 141, 255, 0.16);
  --run: #8db4ff;
  --err: #ff8a7a;
  --err-soft: #3a2420;
  --focus: #5a6170;
  --focus-soft: rgba(76, 141, 255, 0.18);
  --wave: rgba(111, 157, 255, 0.62);
  }
}