/* ============================================================================
 * anim-tools-canvas-dark.css · 画布(ReactFlow 子应用)深色皮 — 逆水寒(nsh·墨青) + 无限大(ananta·蓝紫) 两套
 * ----------------------------------------------------------------------------
 * 机制：换肤桥给嵌入态 iframe <html> 打 data-brand=nsh
 *       (skin-bridge.js snapshot.brand → ai-anim-tools.html:47 applySkin setAttribute)
 *       非 v2 的 nsh 命中深色块；v2 用独立浅色块覆盖 anim-tools-canvas-tokens.css 默认。
 * 只翻 表面/文字/边框/glass/节点/chip/hover/shadow；accent(玫瑰豆沙)/danger(红)/尺寸/圆角/间距 不动。
 * standalone 直开(无 data-brand) / 浅色品牌(roco白天/xpeng) 不命中 → 保持浅色默认。
 * 其它深色品牌(wxq / roco夜景)日后在此加各自 html[data-brand=x] 块。
 * ============================================================================ */
html[data-brand="nsh"]:not([data-nsh-skin="v2"]) {
  /* 文字 → 反白 */
  --canvas-fg-default: #eef2f4;
  --canvas-fg-subtle: rgba(255, 255, 255, 0.60);
  --canvas-fg-muted: rgba(255, 255, 255, 0.42);
  --canvas-color-text: #e2e8ec;

  /* 表面 → 深墨青（画布底最深、卡/节点浅一档让节点跳出）*/
  --canvas-bg-surface: #101b25;
  --canvas-bg-canvas: var(--app-surface-muted);              /* 半透深墨青底(≈侧栏)，壁纸透但压一层底色 */
  --canvas-bg-card: #18232e;                          /* 卡/modal = 比画布底浅一档 */
  --canvas-bg-glass: rgba(24, 35, 46, 0.72);
  --canvas-bg-glass-hover: rgba(30, 43, 55, 0.90);

  /* 边框 → 浅色发丝线 */
  --canvas-border-default: rgba(255, 255, 255, 0.12);
  --canvas-border-strong: rgba(255, 255, 255, 0.20);
  --canvas-border-soft: rgba(255, 255, 255, 0.07);

  /* 节点 frame → 深卡 + 深底阴影 */
  --canvas-node-bg: #18232e;
  --canvas-node-border: rgba(255, 255, 255, 0.12);
  --canvas-node-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  --canvas-node-shadow-selected: 0 4px 16px rgba(0, 0, 0, 0.50);

  /* inline 编辑器 → 深卡 */
  --canvas-inline-bg: #18232e;
  --canvas-inline-border: rgba(255, 255, 255, 0.12);
  --canvas-inline-shadow: 0 4px 12px rgba(0, 0, 0, 0.40);

  /* chip → 深底浅字 */
  --canvas-chip-bg: rgba(30, 43, 55, 0.90);
  --canvas-chip-bg-hover: #23303d;
  --canvas-chip-border: rgba(255, 255, 255, 0.12);
  --canvas-chip-fg: #e2e8ec;
  --canvas-chip-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  --canvas-chip-hover-bg: rgba(255, 255, 255, 0.06);

  /* hover / running 态底 */
  --canvas-hover-bg: rgba(255, 255, 255, 0.06);
  --canvas-running-bg: rgba(30, 43, 55, 0.90);

  /* 通用 shadow → 深底加深 */
  --canvas-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --canvas-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --canvas-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --canvas-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.55);
}

/* 新皮：浅色雾山湖。--app-* 由 skin bridge 从外壳推入，故与当前 v2 外壳同源。 */
html[data-brand="nsh"][data-nsh-skin="v2"] {
  /* 文字 */
  --canvas-fg-default: var(--app-text-strong);
  --canvas-fg-subtle: var(--app-text-muted);
  --canvas-fg-muted: var(--app-text-subtle);
  --canvas-fg-brand: var(--app-primary);
  --canvas-color-text: var(--app-text);

  /* 浅底、半透明阅读面 */
  --canvas-bg-surface: var(--app-surface-muted);
  --canvas-bg-canvas: var(--app-surface-muted);
  --canvas-bg-card: var(--app-surface);
  --canvas-bg-glass: var(--app-surface-glass);
  --canvas-bg-glass-hover: var(--app-surface-glass-hover);

  /* 青绿主色 */
  --canvas-primary-filled: var(--app-primary);
  --canvas-primary-hover: var(--app-primary-hover);
  --canvas-primary-active: var(--app-primary-bright);
  --canvas-primary-soft: var(--app-primary-soft);
  --canvas-primary-ring: var(--app-primary-ring);
  --canvas-confirm-blue: var(--app-primary);
  --canvas-border-focus: var(--app-primary);
  --canvas-chip-bg-active: var(--app-primary);
  --canvas-chip-active-bg: var(--app-primary-soft);
  --canvas-selected-ring: 2px solid var(--app-primary);
  --canvas-selected-bg-soft: var(--app-primary-soft);
  --canvas-running-fg: var(--app-primary);
  --canvas-running-border: var(--app-primary-ring);

  /* 细边 */
  --canvas-border-default: var(--app-border);
  --canvas-border-strong: var(--app-border-strong);
  --canvas-border-soft: var(--app-border-soft);

  /* 节点与 inline 编辑器 */
  --canvas-node-bg: var(--app-surface);
  --canvas-node-border: var(--app-border);
  --canvas-node-shadow: 0 1px 3px rgba(47, 108, 119, 0.10);
  --canvas-node-shadow-selected: 0 4px 16px rgba(35, 102, 113, 0.16);
  --canvas-inline-bg: var(--app-surface);
  --canvas-inline-border: var(--app-border);
  --canvas-inline-shadow: 0 4px 12px rgba(47, 108, 119, 0.10);

  /* chip / hover */
  --canvas-chip-bg: var(--app-surface-glass);
  --canvas-chip-bg-hover: var(--app-surface-glass-hover);
  --canvas-chip-border: var(--app-border);
  --canvas-chip-fg: var(--app-text);
  --canvas-chip-shadow: 0 2px 8px rgba(47, 108, 119, 0.10);
  --canvas-chip-hover-bg: var(--app-primary-soft);
  --canvas-hover-bg: var(--app-primary-soft);
  --canvas-running-bg: var(--app-surface-glass-hover);

  /* v2 bridge 未传 --app-shadow-card / --app-shadow-hover，保留同色系浅阴影字面值。 */
  --canvas-shadow-sm: 0 1px 2px rgba(47, 108, 119, 0.08);
  --canvas-shadow-md: 0 4px 12px rgba(47, 108, 119, 0.10);
  --canvas-shadow-lg: 0 12px 32px rgba(47, 108, 119, 0.12);
  --canvas-shadow-xl: 0 24px 48px rgba(35, 102, 113, 0.16);
}

/* ── ananta(无限大) 深夜蓝紫画布皮（2026-08-05 换皮工位，照上方 nsh 块的键位 1:1 换值）──
   与上方 nsh(墨青) 块各自独立 scope，互不命中。
   色相跟外壳 _brand-ananta.css 的夜玻璃走（#0A0E1C 夜底 / rgba(26,32,58) 面板），配色为暂定推导稿。
   accent(玫瑰豆沙) / danger(红) / 尺寸 / 圆角 / 间距 一律不动，与 nsh 块口径一致。 */
html[data-brand="ananta"] {
  /* 文字 → 反白 */
  --canvas-fg-default: #eef0fa;
  --canvas-fg-subtle: rgba(255, 255, 255, 0.60);
  --canvas-fg-muted: rgba(255, 255, 255, 0.42);
  --canvas-color-text: #e4e8f6;

  /* 表面 → 深夜蓝紫（画布底最深、卡/节点浅一档让节点跳出）*/
  --canvas-bg-surface: #0E1226;                       /* 本工厂不消费(只 admin-app/anim-admin 用)，留值备查 */
  /* 画布底：2026-08-06 第三轮「整体再亮一档」——原来跟 --app-surface-muted 走(本轮已升到 0.76)，
     那是给「白字直接压面」的浮层定的实度，画布用不着：节点/卡片自带 #161B33 实底(卡内 13.86:1)，
     画布底只负责让 ReactFlow 点阵网格看得见，压太实就把外壳 KV 挡没了。故改独立值 0.46。 */
  --canvas-bg-canvas: rgba(6, 10, 22, 0.46);
  --canvas-bg-card: #161B33;                          /* 卡/modal = 比画布底浅一档 */
  --canvas-bg-glass: rgba(22, 27, 51, 0.72);
  --canvas-bg-glass-hover: rgba(30, 36, 64, 0.90);

  /* 边框 → 浅色发丝线 */
  --canvas-border-default: rgba(255, 255, 255, 0.12);
  --canvas-border-strong: rgba(255, 255, 255, 0.20);
  --canvas-border-soft: rgba(255, 255, 255, 0.07);

  /* 节点 frame → 深卡 + 深底阴影 */
  --canvas-node-bg: #161B33;
  --canvas-node-border: rgba(255, 255, 255, 0.12);
  --canvas-node-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  --canvas-node-shadow-selected: 0 4px 16px rgba(0, 0, 0, 0.50);

  /* inline 编辑器 → 深卡 */
  --canvas-inline-bg: #161B33;
  --canvas-inline-border: rgba(255, 255, 255, 0.12);
  --canvas-inline-shadow: 0 4px 12px rgba(0, 0, 0, 0.40);

  /* chip → 深底浅字 */
  --canvas-chip-bg: rgba(30, 36, 64, 0.90);
  --canvas-chip-bg-hover: #222946;
  --canvas-chip-border: rgba(255, 255, 255, 0.12);
  --canvas-chip-fg: #e4e8f6;
  --canvas-chip-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  --canvas-chip-hover-bg: rgba(255, 255, 255, 0.06);

  /* hover / running 态底 */
  --canvas-hover-bg: rgba(255, 255, 255, 0.06);
  --canvas-running-bg: rgba(30, 36, 64, 0.90);

  /* 通用 shadow → 深底加深 */
  --canvas-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --canvas-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --canvas-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --canvas-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.55);
}