/* 统一设计令牌（shared/design）—— 跨 PPT/Word/Excel 外壳一致。
   命名空间 --hp-* 避免与既有 style.css 变量冲突（增量、不破坏现有）。
   主题：[data-theme=dark]；强调色随文档类型：[data-doctype=ppt|word|sheet|code|kb]；密度：[data-density]。 */
:root {
    /* 语义面色（亮色） */
    --hp-bg: #faf9f8;
    --hp-surface: #ffffff;
    --hp-surface-2: #f3f2f1;
    --hp-border: #e1dfdd;
    --hp-border-soft: #edebe9;
    --hp-text-1: #201f1e;
    --hp-text-2: #605e5c;
    --hp-text-disabled: #a19f9d;
    --hp-hover: rgba(0, 0, 0, .05);
    --hp-press: rgba(0, 0, 0, .09);
    --hp-focus: #2684ff;

    /* 强调色（按文档类型覆盖；默认 VSCode 蓝） */
    --hp-accent: #007acc;
    --hp-accent-fg: #ffffff;

    /* 材质（毛玻璃）：主题引擎设置 html[data-material]，此处仅定义配方 */
    --hp-material-blur: 28px;
    --hp-material-sat: 1.5;
    --hp-acrylic: color-mix(in srgb, var(--hp-surface) 72%, transparent);
    --hp-acrylic-strong: color-mix(in srgb, var(--hp-surface) 84%, transparent);

    /* 圆角 / 阴影 / 间距 */
    --hp-radius-sm: 4px;
    --hp-radius: 6px;
    --hp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .08);
    --hp-shadow-md: 0 4px 12px rgba(0, 0, 0, .12);
    --hp-space-1: 4px;
    --hp-space-2: 8px;
    --hp-space-3: 12px;
    --hp-space-4: 16px;

    /* 布局 */
    --hp-inspector-w: 280px;
    --hp-statusbar-h: 26px;
    --hp-row-h: 28px;

    /* 动效 */
    --hp-dur: 160ms;
    --hp-ease: cubic-bezier(.2, .7, .2, 1);

    /* —— 统一菜单体系（右键菜单/下拉菜单/底部抽屉/AI 结果面板）——
       参考 reference/context-menu-prototype.html。颜色跟随 --hp-accent。 */
    --hp-menu-bg: rgba(252, 253, 254, .82);
    --hp-menu-blur: 32px;
    --hp-menu-border: rgba(20, 60, 100, .10);
    --hp-menu-shadow: 0 8px 24px rgba(30, 80, 140, .16), 0 0 0 1px var(--hp-menu-border);
    --hp-menu-radius: 8px;
    --hp-item-height: 36px;
    --hp-item-radius: 4px;
    --hp-item-hover: color-mix(in srgb, var(--hp-accent) 8%, transparent);
    --hp-item-active: color-mix(in srgb, var(--hp-accent) 14%, transparent);
    --hp-item-padding-x: 10px;
    /* 双色图标垫底层：天依蓝 #66CCFF + 低透明度 */
    --hp-ic-2: #66ccff;
    --hp-ic-2-op: .40;
    --hp-danger: #c42b1c;
    --hp-danger-bg: rgba(196, 43, 28, .08);
    /* AI 紫青双色 */
    --hp-ai: #6d5ce0;
    --hp-ai-2: #38b6ff;
    --hp-ai-bg: rgba(109, 92, 224, .07);
    --hp-ai-hover: rgba(109, 92, 224, .13);
    --hp-sheet-bg: rgba(248, 251, 254, .94);
    --hp-mask: rgba(20, 50, 80, .25);
    /* diff 标注 */
    --hp-ins: rgba(40, 160, 80, .16);
    --hp-ins-t: #116b33;
    --hp-del: rgba(200, 60, 50, .14);
    --hp-del-t: #a02c22;
}

/* 文档类型强调色（外壳在切换编辑器时设置 body[data-doctype]） */
[data-doctype="ppt"] { --hp-accent: #c43e1c; }
[data-doctype="word"] { --hp-accent: #185abd; }
[data-doctype="sheet"] { --hp-accent: #107c41; }
[data-doctype="code"] { --hp-accent: #8b5cf6; }
[data-doctype="kb"] { --hp-accent: #0e7490; }

/* 暗色（含 iframe 内可通过 postMessage 同步 data-theme） */
[data-theme="dark"] {
    --hp-bg: #1b1a19;
    --hp-surface: #252423;
    --hp-surface-2: #2f2e2d;
    --hp-border: #3b3a39;
    --hp-border-soft: #323130;
    --hp-text-1: #f3f2f1;
    --hp-text-2: #c8c6c4;
    --hp-text-disabled: #797775;
    --hp-hover: rgba(255, 255, 255, .06);
    --hp-press: rgba(255, 255, 255, .10);

    /* 菜单体系暗色 */
    --hp-menu-bg: rgba(44, 48, 52, .80);
    --hp-menu-border: rgba(255, 255, 255, .085);
    --hp-menu-shadow: 0 8px 28px rgba(0, 0, 0, .55), 0 0 0 1px var(--hp-menu-border);
    --hp-item-hover: rgba(255, 255, 255, .065);
    --hp-item-active: rgba(255, 255, 255, .11);
    --hp-ic-2: #66ccff;
    --hp-ic-2-op: .42;
    --hp-danger: #ff6b70;
    --hp-danger-bg: rgba(255, 107, 112, .10);
    --hp-ai: #a08bff;
    --hp-ai-2: #5fc6ff;
    --hp-ai-bg: rgba(140, 110, 255, .10);
    --hp-ai-hover: rgba(140, 110, 255, .18);
    --hp-sheet-bg: rgba(38, 41, 44, .94);
    --hp-mask: rgba(0, 0, 0, .45);
    --hp-ins: rgba(70, 200, 110, .18);
    --hp-ins-t: #7fe0a0;
    --hp-del: rgba(255, 110, 100, .16);
    --hp-del-t: #ff9a92;
}
/* auto: follow system preference */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --hp-bg: #1b1a19;
    --hp-surface: #252423;
    --hp-surface-2: #2f2e2d;
    --hp-border: #3b3a39;
    --hp-border-soft: #323130;
    --hp-text-1: #f3f2f1;
    --hp-text-2: #c8c6c4;
    --hp-text-disabled: #797775;
    --hp-hover: rgba(255, 255, 255, .06);
    --hp-press: rgba(255, 255, 255, .10);

    --hp-menu-bg: rgba(44, 48, 52, .80);
    --hp-menu-border: rgba(255, 255, 255, .085);
    --hp-menu-shadow: 0 8px 28px rgba(0, 0, 0, .55), 0 0 0 1px var(--hp-menu-border);
    --hp-item-hover: rgba(255, 255, 255, .065);
    --hp-item-active: rgba(255, 255, 255, .11);
    --hp-ic-2: #66ccff;
    --hp-ic-2-op: .42;
    --hp-danger: #ff6b70;
    --hp-danger-bg: rgba(255, 107, 112, .10);
    --hp-ai: #a08bff;
    --hp-ai-2: #5fc6ff;
    --hp-ai-bg: rgba(140, 110, 255, .10);
    --hp-ai-hover: rgba(140, 110, 255, .18);
    --hp-sheet-bg: rgba(38, 41, 44, .94);
    --hp-mask: rgba(0, 0, 0, .45);
    --hp-ins: rgba(70, 200, 110, .18);
    --hp-ins-t: #7fe0a0;
    --hp-del: rgba(255, 110, 100, .16);
    --hp-del-t: #ff9a92;
  }
}

/* 密度 */
[data-density="comfortable"] { --hp-row-h: 36px; }
[data-density="compact"] { --hp-row-h: 28px; }