hunjing/frontend/design/tokens.css

/* ============================================================
 * design/tokens.css — 铜镜鉴心设计 token（原型层单一事实源）
 * ============================================================
 *
 * 用途：供 design/*.html 原型 <link> 引用，消除此前每个原型
 *       各存一份 :root 副本、且已开始漂移（如 --patina-wash
 *       在 card-import / lorebook 误写为 0.07）的问题。
 *
 * 源：色值与 src/styles/globals.css 的「铜镜鉴心」主题同源
 *     （globals.css 暗色见 .dark 块、亮色见 :root 块）。
 *     改 token 时请同步两边；本文件头部「与生产侧差异」段
 *     列出有意不同的变量。
 *
 * 主题切换：原型沿用 [data-theme="dark|light"] 属性切换，
 *           默认 :root 走暗色（暗色优先）。
 *
 * 与生产侧（globals.css）的有意差异：
 *   --surface / --surface-hi
 *     原型用「半透明玻璃叠加层」语义（rgba），配合 body::before
 *     极光底产生镜面通透感；生产侧 globals.css 演进为「实色面板」
 *     语义（#121817 / 实色），利于渲染可预测性。两层各持一套，
 *     不强行统一——若要原型对齐生产实色，替换这两个变量即可。
 *
 * 色值命名：描述名 (hex) — 功能角色（per finesse design-dna §1）
 * ============================================================ */

/* ============================================================
 * 动画 token（过渡时长与缓动，统一全站节奏）
 * ============================================================ */
:root {
  --duration-fast: 0.12s;
  --duration-normal: 0.18s;
  --duration-slow: 0.28s;
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
}

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

  /* ── 底色族 ── */
  --ink: #0c0e0d; /* 墨 — 暗底、道体深处 */
  --night-bronze: #14110d; /* 夜铜 — 暗面，带铜温 */

  /* ── 玻璃面（半透明叠加；与生产实色面板语义不同，见头部说明）── */
  --surface: rgba(255, 255, 255, 0.022);
  --surface-hi: rgba(255, 255, 255, 0.045);

  /* ── 鎏金 — 结构 / 发丝线 / 标签 ── */
  --gilt: #c9a24a;
  --gilt-dim: rgba(201, 162, 74, 0.32);
  --gilt-faint: rgba(201, 162, 74, 0.14);

  /* ── 铜绿锈 — 主色：在场 / 活跃 / 健康 / 记忆 ── */
  --patina: #6fa389;
  --patina-bright: #84bb9d;
  --patina-dim: rgba(111, 163, 137, 0.34);
  --patina-wash: rgba(
    111,
    163,
    137,
    0.06
  ); /* verdigris 底色晕，把暗底拉向铜绿 */

  /* ── 朱漆 — 仅司命 / 朱批 / 告警（全站唯一热色，克制使用）── */
  --cinnabar: #b8392e;
  --cinnabar-dim: rgba(184, 57, 46, 0.4);
  --cinnabar-wash: rgba(184, 57, 46, 0.15);

  /* ── 文字与发丝线 ── */
  --fg: #e7e1d2;
  --fg-dim: #9b958a;
  --fg-faint: #5e5a52;
  --rule: rgba(201, 162, 74, 0.16);

  /* ── 镜面光照（复合值，组件内联引用）── */
  --face-sheen: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.09),
    rgba(255, 255, 255, 0.02) 42%,
    rgba(0, 0, 0, 0.18)
  );
  --face-in-top: rgba(255, 255, 255, 0.11);
  --face-in-bot: rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35);

  /* ── 通用扩展（次要文字 / 玻璃 / 悬停 / 光扫）—— 取自 globals.css ── */
  --muted: #8a9389;
  --glass: rgba(255, 255, 255, 0.045);
  --glass-strong: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.1);
  --overlay-hover: rgba(255, 255, 255, 0.05);
  --overlay-active: rgba(255, 255, 255, 0.1);
  --overlay-light: rgba(255, 255, 255, 0.03);
  --sweep-gradient: linear-gradient(
    130deg,
    transparent 0%,
    transparent 28%,
    rgba(201, 162, 74, 0.025) 34%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(201, 162, 74, 0.025) 48%,
    transparent 55%,
    transparent 100%
  );

  /* ── 扩展色板：五行（wuxing）· 玄武 slate（cosmos）· API 标签 blue（admin）── */
  --wood: #6fa389;
  --wood-dim: rgba(111, 163, 137, 0.34);
  --fire: #b8392e;
  --fire-dim: rgba(184, 57, 46, 0.38);
  --earth: #b08a3c;
  --earth-dim: rgba(176, 138, 60, 0.36);
  --metal: #c9a24a;
  --metal-dim: rgba(201, 162, 74, 0.34);
  --water: #5a7fa6;
  --water-dim: rgba(90, 127, 166, 0.38);
  --blue: #5b8ab5;
  --blue-dim: rgba(91, 138, 181, 0.3);
  --blue-wash: rgba(91, 138, 181, 0.08);
  --slate: #6b7785;
  --slate-dim: rgba(107, 119, 133, 0.4);
  --slate-wash: rgba(107, 119, 133, 0.08);
}

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

  /* ── 底色族（素绢暖纸）── */
  --ink: #e7e1d0;
  --night-bronze: #ddd4c0;

  --surface: rgba(255, 255, 255, 0.5);
  --surface-hi: rgba(255, 255, 255, 0.74);

  --gilt: #8a6d28;
  --gilt-dim: rgba(138, 109, 40, 0.36);
  --gilt-faint: rgba(138, 109, 40, 0.16);

  --patina: #3f7d68;
  --patina-bright: #2f6450;
  --patina-dim: rgba(63, 125, 104, 0.3);
  --patina-wash: rgba(63, 125, 104, 0.05);

  --cinnabar: #a8342a;
  --cinnabar-dim: rgba(168, 52, 42, 0.4);
  --cinnabar-wash: rgba(168, 52, 42, 0.1);

  --fg: #211d16;
  --fg-dim: #5f594d;
  --fg-faint: #948f82;
  --rule: rgba(138, 109, 40, 0.22);

  --face-sheen: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0.34) 42%,
    rgba(120, 105, 75, 0.08)
  );
  --face-in-top: rgba(255, 255, 255, 0.7);
  --face-in-bot: rgba(120, 100, 60, 0.1);
  --shadow: 0 1px 2px rgba(60, 50, 30, 0.08);

  /* ── 通用扩展（亮色）── */
  --muted: #6b746e;
  --glass: rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(30, 40, 33, 0.1);
  --overlay-hover: rgba(0, 0, 0, 0.04);
  --overlay-active: rgba(0, 0, 0, 0.08);
  --overlay-light: rgba(255, 255, 255, 0.08);
  --sweep-gradient: linear-gradient(
    130deg,
    transparent 0%,
    transparent 24%,
    rgba(200, 170, 130, 0.06) 30%,
    rgba(255, 248, 235, 0.18) 36%,
    rgba(200, 170, 130, 0.1) 44%,
    transparent 52%,
    transparent 100%
  );

  /* ── 扩展色板（亮色）── */
  --wood: #3f7d68;
  --wood-dim: rgba(63, 125, 104, 0.3);
  --fire: #a8342a;
  --fire-dim: rgba(168, 52, 42, 0.36);
  --earth: #8a6d28;
  --earth-dim: rgba(138, 109, 40, 0.32);
  --metal: #8a6d28;
  --metal-dim: rgba(138, 109, 40, 0.32);
  --water: #3a5a7a;
  --water-dim: rgba(58, 90, 122, 0.34);
  --blue: #3f72a5;
  --blue-dim: rgba(63, 114, 165, 0.3);
  --blue-wash: rgba(63, 114, 165, 0.08);
  --slate: #5b6470;
  --slate-dim: rgba(91, 100, 112, 0.38);
  --slate-wash: rgba(91, 100, 112, 0.08);
}