/* ============================================================
   幻想鱼 · 设计令牌（唯一权威层）
   ------------------------------------------------------------
   这个文件是全站唯一的取色与比例来源。styles.css 里不允许再出现
   硬编码颜色、也不允许再写 :root / html[data-theme] 的令牌块。

   分四层，从上到下依次覆盖：

     L1 比例系统   字号 / 圆角 / 间距 / 动效 —— 与主题无关
     L2 主题令牌   日戏 / 棚内 / 夜戏 —— 只作用于「文字面」
     L3 工作面覆盖 [data-surface="media"] —— 看图时强制中性
     L4 兼容别名   老代码用到的令牌，保持不破

   ── 三套配色按「工作条件」分，不按口味 ──

     日戏  暖纸浅色 · 默认     白天写稿、读后台表格      键名 sand
     棚内  中性石墨暗 · 零色相  挑图、比片、校色          键名 mono
     夜戏  暖炭黑               夜里连读几千字的分镜稿    键名 aurora

   ── 关于键名 ──
   sand / aurora / mono 这三个键名是历史遗留，而且**服务端会持久化并校验**
   （server/db-row-mappers.js 的 normalizeTheme、以及 4 处建表默认值）。
   本轮只改前端，所以键名原样保留，只换含义和标签——
   这样每个用户已经存下来的偏好一个都不会丢。
   看到 "sand" 请读作「日戏」，"mono" 读作「棚内」，"aurora" 读作「夜戏」。

   旧的三套（暖砂/极光/黑白）是按口味分的，三套之间没有分工，
   用户不知道该选哪个。新的三套各自回答「现在是什么光线、我在干什么活」。

   ── 强调色：聚光灯金 ──
   顶光、钨丝灯、场记板的黄铜——这个行业本来就用这个颜色。
   关键是它不占用任何状态色的位置：蓝＝进行中、绿＝完成、玫红＝失败，
   金只表示「这里可以动」。上一版用赤陶，和失败色只差十几度色相，
   一屏同时出现会分不清「这是品牌元素」还是「这个挂了」。

   状态一律「图标 + 文案 + 颜色」三者同时给，绝不靠颜色单独表意。
   ============================================================ */

/* ────────────────────────────────────────────
   L1 · 比例系统（与主题无关）
   ──────────────────────────────────────────── */
:root {
  /* Studio controls use a stable neutral palette, including floating menus outside
     the studio DOM. These do not change the reading surfaces or generation data. */
  --studio-mint: #83dcb6;
  --studio-cyan: #7ed9e5;
  --studio-violet: #c0a6f5;
  --studio-blue: #94bfff;
  --studio-amber: #edc67e;
  --studio-panel: #202326;
  --studio-menu: #292d31;
  --studio-hover: #343a40;
  --studio-selected: #3b4249;
  --studio-text: #e6e9ec;
  --studio-muted: #b4bbc2;
  --studio-border: #4a535c;
  --studio-line: #363d44;
  --studio-accent: #f0a184;
  --studio-accent-ink: #251711;
  --studio-focus: #8ebdf1;
  --studio-scrim: rgba(0, 0, 0, .48);
  --studio-shadow: 0 12px 36px rgba(0, 0, 0, .32);
  /* ── 外壳字号：密。侧栏、网格、表格、芯片。 ── */
  --fs-1: 11px;    /* 角标、计数、时间戳 */
  --fs-2: 12.5px;  /* 说明文字、表格次要列 */
  --fs-3: 13.5px;  /* 密集 UI、侧栏行、按钮 */
  --fs-4: 15px;    /* 正文 */
  --fs-5: 17px;    /* 小标题 */
  --fs-6: 21px;    /* 面板标题 */
  --fs-7: 27px;    /* 页面标题 */

  /* ── 正文字号：松。剧本、分镜稿要连读几千字。 ──
     外壳和正文用同一套尺度做不到两件事，所以分开。 */
  --read: 15.5px;
  --read-lh: 1.8;
  --read-measure: 62ch; /* 中文一行超过 40 字，眼睛就要费劲找下一行行首 */

  /* ── 圆角：4 档 ──
     对齐 Claude 的 8 / 12 / 16 刻度。原来是 5 / 9 / 15，整体紧一档，
     而 5px 那一档有 55 处在用——按钮和卡片低于 6px 就开始有硬边感，
     这是「柔和」这个气质最先丢掉的地方。 */
  --r-1: 8px;      /* 芯片、小控件、缩略图 */
  --r-2: 12px;     /* 按钮、输入框、卡片 */
  --r-3: 16px;     /* 对话框、主面板 */
  --r-pill: 999px; /* 只给计数、徽章、头像、状态芯片 */

  /* ── 间距：8px 基准 ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ── 可点尺寸：3 档 ──
     以前没有这一档，于是每个按钮各长各的：输入框那一行曾同时出现
     24 / 24 / 34 / 36 / 24 五种高度。WCAG 2.2 的下限是 24×24，那是**下限不是目标**；
     舒适区从 32 起步，所以最小一档取 28（只给密集处），标准 32，主操作 36。 */
  --tap-1: 28px;   /* 密集处：芯片内联操作、折叠把手、列表行动作 */
  --tap-2: 32px;   /* 标准图标按钮 */
  --tap-3: 36px;   /* 输入框工具条、主操作 */

  /* ── 动效：3 个时长 + 2 条曲线 ──
     进入用减速曲线，离开用加速；只有匀速进度条才用 linear。 */
  --dur-1: 110ms;  /* 微反馈：hover、按下、勾选 */
  --dur-2: 180ms;  /* 面板进出、hover 才出现的操作 */
  --dur-3: 280ms;  /* 工作面切换、大图开合 —— 唯一允许被看见的一档 */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── 字体：先满足中文 ── */
  --font-sans: Inter, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: var(--read-measure);
}

/* ────────────────────────────────────────────
   L2 · 主题令牌
   ──────────────────────────────────────────── */

/* ── 日戏 daylight：暖纸浅色。默认。 ──
   奶油纸面配烫金——金压在暖纸上是这套配色最舒服的一处。
   色度压得很低，长文阅读不会产生色偏疲劳。 */
:root,
html[data-theme="sand"] {
  color-scheme: light;

  /* 表面阶梯：5 层，每步 3.8–4.3 L*，饱和随明度收敛（越暗越中性，暗面发黄会显脏）。
     改前是 9 层浅色挤在 15 L* 里、其中 5 处步进不到 2.0——低于人眼分辨下限，
     眼睛看到的是一整片米色，只产生浑浊不产生层次。一屏画出 17 种背景色。 */
  --page: #f1efe9;
  --page-2: #eae7df;
  --surface: #fbfaf8;
  --surface-2: #e7e4dc;
  --surface-3: #dcd9cf;
  --surface-4: #d0cdc3;

  /* 2026-08-31 从 #191712 调亮到 #302b22。原来正文对比度 15.7:1（画布）/
     17.9:1（纯白气泡），已经接近纯黑配纯白的 21:1 —— 这个产品是拿来读长剧本和
     分镜稿的，那个数值久看会累。现在 12.3 / 14.1，落在 iOS(13) Notion(12.6)
     GitHub(13.9) 这一档，离 AA 下限 4.5 仍有很大余量。 */
  --ink: #302b22;
  --muted: #57534a;
  --muted-2: #6a655a;

  --line: rgba(41, 36, 22, 0.11);
  --line-2: rgba(41, 36, 22, 0.2);

  /* 强调色。--teal 这个名字是历史遗留（曾经真的是青色），
     现在它就是「品牌强调色」，全站三百多处引用都指向这里。 */
  /* 强调色。改前 #8a6100 明度只有 27%，在浅底上读作"深棕"而不是一个颜色——
     因为它一个令牌当两用：既做填充又当文字色，要满足文字 4.5:1 就被压暗了。
     现在拆成两个：--teal 做填充（47% 明度，按钮浅字 4.64:1），--teal-ink 才是文字色。
     失败色同步改深改冷：陶土与原失败色 #b8332c 的 ΔE 只有 15.7，并排分不出——
     2026-08-29 那次正是因为这个把赤陶换成了金，不能重蹈覆辙。现在 ΔE 24.2。 */
  --teal: #a85b48;
  --teal-ink: #8c4430;
  --teal-soft: rgba(168, 91, 72, 0.12);
  --accent-ink: #faf8f0;

  /* 次级：低饱和石板色。只做标签和分类标记，永远不跟金抢。 */
  --clay: #6a6459;   /* 原 #5c6670 是冷灰 257.8°，暖纸主题里不该有冷灰 */
  --clay-soft: rgba(106, 100, 89, 0.1);

  /* 焦点环。全站唯一的冷色，无障碍需要它在任何底色上都足够醒目。 */
  --blue: #1d6fc4;

  --danger: #9d2323;
  --warning: #8f4e0a;
  --ok: #1a6b43;

  /* 环形阴影 + 耳语投影。原来是 0 1px 2px + 0 12px 30px 的传统投影，
     面板是「浮」在页面上的；现在第一层 0 0 0 1px 是一道贴边的暖色环——
     它是一道假装成边框的阴影，第二层 4px/24px 极淡，只暗示离地，
     不真的投下影子。深度靠环和底色层级给，不靠投影重量。 */
  --shadow: 0 0 0 1px rgba(41, 36, 22, 0.07), 0 4px 24px rgba(41, 36, 22, 0.07);
  --panel-alpha: 1;

  /* 以下原本各占一层，但与阶梯上的层差不足 2 L*，看不出差别，现并入阶梯。 */
  --bubble: #fbfaf8;
  --bubble-user: #efe7db;
  --bubble-user-ink: #302b22;
  --input-bg: #fbfaf8;
  --chat-bg: #f1efe9;
  --chat-bg-soft: #f1efe9;
  --composer-bg: #fbfaf8;
  --composer-border: rgba(41, 36, 22, 0.16);
  --sidebar-bg: #e7e4dc;

  --rail-card: #fbfaf8;
  --rail-card-open: #f4f2ec;
  --rail-card-hover: #f7f5f1;
  --rail-card-active: #f2ede4;

  --code-bg: #eeebe3;
  --code-ink: #3a362d;
  --table-bg: #fbfaf8;
  --table-head: #f1efe9;

  --brand-logo-filter: none;
  --brand-logo-opacity: 1;
  --brand-logo-bg: #fbfaf8;
  --brand-logo-border: rgba(168, 91, 72, 0.24);
  --brand-logo-shadow: 0 8px 22px rgba(41, 36, 22, 0.1);
}

/* ── 棚内 studio：冷中性石墨。挑图比片校色用这一套。 ──
   上一版是 R=G=B 的纯零色度。零色度在自发光屏上是「死」的——更要命的是
   强调色 C=42 而底色 C=0，色度差 42，强调色整个悬浮在灰底上，看着像
   两样东西拼在一起，不像一套配色。
   这一版给中性面加了一线冷色（色相 252°，C 从 0.8 递增到 2.6）。
   大面积色块在没有中性参照物并排的情况下，C≲3 认不出色偏，
   而看图时的参照物就是图本身——所以「中性」这个功能承诺不受影响，
   界面却不再是死平的。
   面阶按 L* 重排：底部四级原来是 1.9 / 1.6 / 1.9，全在 2.0 感知阈以下，
   页底、侧栏、对话区三个最大的面互相分不开；现在最小台阶 2.5。 */
html[data-theme="mono"] {
  color-scheme: dark;

  --page: #121415;
  --page-2: #0a0c0d;
  --surface: #1d2022;
  --surface-2: #25282a;
  --surface-3: #2d3134;
  --surface-4: #393c3f;

  /* 暗底上过高的对比度会产生光晕（halation），比浅色主题更累眼。压到 12.7:1。 */
  --ink: #d4d6d8;
  --muted: #9ea1a3;
  --muted-2: #888a8d;

  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.18);

  --teal: #eb9271;
  --teal-ink: #eb9271;
  --teal-soft: rgba(235, 146, 113, 0.16);
  --accent-ink: #1a0e08;

  --clay: #909aa2;
  --clay-soft: rgba(144, 154, 162, 0.14);

  --blue: #72a4dd;

  --danger: #ef7772;
  --warning: #dda668;
  --ok: #72bb8a;

  --shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 4px 24px rgba(0, 0, 0, 0.42);
  --panel-alpha: 1;

  --bubble: #1f2124;
  --bubble-user: #30231e;
  --bubble-user-ink: #dfdcda;
  --input-bg: #1d2022;
  --chat-bg: #17191b;
  --chat-bg-soft: #17191b;
  --composer-bg: #1d2022;
  --composer-border: rgba(255, 255, 255, 0.16);
  --sidebar-bg: #0f1112;

  --rail-card: #1d2022;
  --rail-card-open: #25282a;
  --rail-card-hover: #2a2d30;
  --rail-card-active: #30231e;

  --code-bg: #0d1011;
  --code-ink: #d4d6d8;
  --table-bg: #1d2022;
  --table-head: #26292c;

  --brand-logo-filter: none;
  --brand-logo-opacity: 0.94;
  --brand-logo-bg: #25282a;
  --brand-logo-border: rgba(226, 170, 75, 0.22);
  --brand-logo-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

/* ── 夜戏 night：暖中性炭。夜里读几千字用这一套。 ──
   暖调能降低暗环境下的对比灼烧感，这个前提没变，变的是「暖」怎么给。
   上一版底色在 48°，跟 46° 的强调色、跟正文墨色全挤在 40–50° 一个色相里，
   整套单色沉香——这就是它显得旧的原因，不是深浅问题。
   这一版把底色抬到 88°：还是暖的，但是暖灰而不是棕，跟强调色拉开 51°。
   底和强调之间有了色相张力，强调色才立得住。
   C 从 1.4 递增到 5.2，比棚内明显更暖，两套主题这才真的是两套。 */
html[data-theme="aurora"] {
  color-scheme: dark;

  --page: #151410;
  --page-2: #0d0b08;
  --surface: #221f1b;
  --surface-2: #2a2722;
  --surface-3: #33302a;
  --surface-4: #3f3b34;

  /* 同棚内：压到 12.8:1，留在长读舒适带内。 */
  --ink: #dad7d1;
  --muted: #a6a39d;
  --muted-2: #908c86;

  --line: rgba(237, 233, 227, 0.1);
  --line-2: rgba(237, 233, 227, 0.19);

  --teal: #f2936c;
  --teal-ink: #f2936c;
  --teal-soft: rgba(242, 147, 108, 0.16);
  --accent-ink: #1a0e08;

  --clay: #a19a90;
  --clay-soft: rgba(161, 154, 144, 0.14);

  --blue: #70a8dc;

  --danger: #f47970;
  --warning: #dfa966;
  --ok: #77bd8a;

  --shadow: 0 0 0 1px rgba(237, 233, 227, 0.07), 0 4px 24px rgba(0, 0, 0, 0.4);
  --panel-alpha: 1;

  --bubble: #23211c;
  --bubble-user: #33221b;
  --bubble-user-ink: #e1ded7;
  --input-bg: #221f1b;
  --chat-bg: #1a1915;
  --chat-bg-soft: #1a1915;
  --composer-bg: #221f1b;
  --composer-border: rgba(237, 233, 227, 0.17);
  --sidebar-bg: #12100d;

  --rail-card: #221f1b;
  --rail-card-open: #2a2722;
  --rail-card-hover: #2f2c26;
  --rail-card-active: #33221b;

  --code-bg: #110f0c;
  --code-ink: #dad7d1;
  --table-bg: #221f1b;
  --table-head: #2b2923;

  --brand-logo-filter: none;
  --brand-logo-opacity: 0.95;
  --brand-logo-bg: #2a2722;
  --brand-logo-border: rgba(232, 180, 87, 0.22);
  --brand-logo-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}

/* ────────────────────────────────────────────
   L3 · 工作面覆盖：看图时强制中性
   ────────────────────────────────────────────
   进制图台 / 视频台 / 音乐台 / 素材库 / MJ 码库时，不管用户选的是哪套主题，
   界面一律切到「棚内」那套中性石墨。看图时界面不能带色偏——
   这是功能，不是偏好。

   写在 L2 之后，选择器特指度相同，靠顺序压过三套主题。
   用户本来就在棚内的话，这一层是无变化的空操作。

   两种写法都支持：
     html[data-surface="media"]  整页切换（工作台是全屏面板，走这个）
     [data-surface="media"]      局部切换（某个区域内嵌图片网格时用）
   ──────────────────────────────────────────── */
html[data-surface="media"],
[data-surface="media"] {
  color-scheme: dark;

  --page: #121415;
  --page-2: #0a0c0d;
  --surface: #1d2022;
  --surface-2: #25282a;
  --surface-3: #2d3134;
  --surface-4: #393c3f;

  /* 媒体面与棚内主题同一套石墨色，逐字段同步（tokens-media-sync 测试锁死）。 */
  --ink: #d4d6d8;
  --muted: #9ea1a3;
  --muted-2: #888a8d;

  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.18);

  --teal: #eb9271;
  --teal-ink: #eb9271;
  --teal-soft: rgba(235, 146, 113, 0.16);
  --accent-ink: #1a0e08;

  --clay: #909aa2;
  --clay-soft: rgba(144, 154, 162, 0.14);

  --blue: #72a4dd;

  --danger: #ef7772;
  --warning: #dda668;
  --ok: #72bb8a;

  --shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 4px 24px rgba(0, 0, 0, 0.42);
  --panel-alpha: 1;

  --bubble: #1f2124;
  --bubble-user: #30231e;
  --bubble-user-ink: #dfdcda;
  --input-bg: #1d2022;
  --chat-bg: #17191b;
  --chat-bg-soft: #17191b;
  --composer-bg: #1d2022;
  --composer-border: rgba(255, 255, 255, 0.16);
  --sidebar-bg: #0f1112;

  --rail-card: #1d2022;
  --rail-card-open: #25282a;
  --rail-card-hover: #2a2d30;
  --rail-card-active: #30231e;

  --code-bg: #0d1011;
  --code-ink: #d4d6d8;
  --table-bg: #1d2022;
  --table-head: #26292c;

  --brand-logo-filter: none;
  --brand-logo-opacity: 0.94;
  --brand-logo-bg: #25282a;
  --brand-logo-border: rgba(226, 170, 75, 0.22);
  --brand-logo-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

/* ────────────────────────────────────────────
   L4 · 兼容别名
   ────────────────────────────────────────────
   老代码里引用但从来没有定义过的令牌。重构前它们静默解析失败：
   --accent（11 处）、--text（7 处）都是拿不到值的。
   --accent / --accent-soft / --text 依赖主题令牌，所以必须跟着
   每一个换主题的选择器一起声明，否则局部 data-surface 里会取到外层的值。
   ──────────────────────────────────────────── */
:root,
html[data-theme="sand"],
html[data-theme="mono"],
html[data-theme="aurora"],
html[data-surface="media"],
[data-surface="media"] {
  --accent: var(--teal);
  --accent-soft: var(--teal-soft);
  --text: var(--ink);
}

:root {
  --img-ease: var(--ease-out);
  --img-spring: var(--ease-out);

  --radius: var(--r-3);
  --card-radius: var(--r-2);
}