/* ============================================================
   老顾 · Office 主题（v0.1 · 2026-11-02）
   Feishu-style office look + World Bank corporate blue.
   挂法：企业租户（household_kind = work）自动挂 <html data-theme="office">（app.js loadBrand）；家庭租户不受影响，照旧用黄 / 绿 / 蓝。
   index.html 在 tokens.css 后面引这个文件；docs/design-system/office/preview.html 也直接引它，两边同一份。
   只换变量，不改结构：骨架、尺寸档（34 / 30 / 28 / 26 / 20）、组件长相全部沿用老顾现有规范。
   ============================================================ */
:root[data-theme="office"] {
  /* ---- 字体 ---- */
  --title-font: "Funnel Sans", "Alibaba PuHuiTi 3.0", "AlibabaPuHuiTi-3", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei UI", sans-serif;
  --pv-font: "Inter", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --pv-font-serif: "Source Serif 4", "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
  --pv-font-num: "Inter", "PingFang SC", system-ui, sans-serif;   /* 配 font-variant-numeric: tabular-nums */

  /* ---- 世行蓝：主色 + 9 档色阶（WBG corporate blue and tints）---- */
  --of-blue-900: #002345;   /* Pantone 289，最深：标题字、深色栏 */
  --of-blue-800: #003A5B;   /* 按下 */
  --of-blue-700: #004972;   /* ★ 主色 WBG corporate blue */
  --of-blue-600: #195B80;   /* 悬停 / 链接 */
  --of-blue-500: #336D8E;
  --of-blue-400: #4C809C;
  --of-blue-300: #6692AA;
  --of-blue-250: #80A4B8;
  --of-blue-200: #99B6C7;   /* 禁用态的主色 */
  --of-blue-150: #B2C8D5;   /* 描边 */
  --of-blue-100: #CCDBE3;
  --of-blue-50:  #E5EDF1;   /* 浅底：选中行、左栏选中 */
  --of-blue-25:  #F2F6F8;   /* 极浅：悬停行 */
  --of-cyan:      #00ADE4;  /* Process Cyan：只做高亮 / 图表 / 聚焦光圈，不当字色 */
  --of-cyan-soft: #E0F5FC;

  /* ---- 中性灰（飞书 N 系）---- */
  --of-n-900: #1F2329;   /* 正文 */
  --of-n-700: #646A73;   /* 次要 */
  --of-n-500: #8F959E;   /* 提示 / 占位 */
  --of-n-400: #BBBFC4;   /* 禁用字 */
  --of-n-300: #DEE0E3;   /* 边线 */
  --of-n-200: #EFF0F1;   /* 分隔 / 浅填充 */
  --of-n-100: #F5F6F7;   /* 画布 */
  --of-n-50:  #FAFAFB;

  /* ---- 老顾变量映射（tokens.css 全站都读这些）---- */
  --pv-primary: var(--of-blue-700);
  --pv-primary-dark: var(--of-blue-900);
  --pv-primary-soft: var(--of-blue-50);
  --pv-primary-hover: var(--of-blue-600);
  --pv-primary-active: var(--of-blue-800);
  --pv-primary-line: var(--of-blue-150);
  --pv-brand: var(--of-blue-700);
  --pv-brand-dark: var(--of-blue-900);
  --pv-brand-soft: var(--of-blue-50);
  --pv-accent: var(--of-cyan);
  --pv-accent-soft: var(--of-cyan-soft);
  --pv-brand-glow: rgba(0, 73, 114, .16);
  --pv-plate-1: #004972; --pv-plate-2: #003A5B; --pv-plate-3: #002345;
  --pv-plate-h1: #195B80; --pv-plate-h2: #004972; --pv-plate-h3: #003A5B;
  --pv-unread: #E5252D;

  --pv-bg: var(--of-n-100);          /* 浅填充：进度槽、chip 底、悬停 */
  --pv-page-bg: var(--of-n-100);     /* 画布灰，内容块白 */
  --pv-surface: #FFFFFF;
  --pv-border: var(--of-n-300);
  --pv-divider: var(--of-n-200);
  --pv-text: var(--of-n-900);
  --pv-text-soft: var(--of-n-700);
  --pv-text-faint: var(--of-n-500);
  --pv-text-disabled: var(--of-n-400);

  /* ---- 语义色：浅底 / 描边 / 文字三件套 ---- */
  --pv-success: #1E8A5A; --pv-success-soft: #E4F3EC; --pv-success-border: #B5DCC8; --pv-success-text: #006446;
  --pv-warning: #C69214; --pv-warning-soft: #FBF3E1; --pv-warning-border: #EBD49E; --pv-warning-text: #8A6100;
  --pv-danger:  #E5252D; --pv-danger-soft:  #FDECEC; --pv-danger-border:  #F5C2C4; --pv-danger-text:  #B4141B;
  --pv-info:    var(--of-blue-700); --pv-info-soft: var(--of-blue-50); --pv-info-border: var(--of-blue-150); --pv-info-text: var(--of-blue-700);

  /* ---- 分类色（图表 / 模块），取自 IFC 次级色，色相拉开 ---- */
  --pv-cat-1:  #004972;   /* 世行蓝 */
  --pv-cat-2:  #00ADE4;   /* Process Cyan */
  --pv-cat-3:  #006446;   /* 7728C 深绿 */
  --pv-cat-4:  #C69214;   /* 1245C 金 */
  --pv-cat-5:  #485CC7;   /* 2726C 靛 */
  --pv-cat-6:  #A4123F;   /* 7426C 酒红 */
  --pv-cat-7:  #87189D;   /* 2602C 紫 */
  --pv-cat-8:  #8BA866;   /* 579C 加深（原 #BCD19B 当色块太浅） */
  --pv-cat-9:  #6692AA;
  --pv-cat-10: #D9741C;
  --pv-cat-11: #C2568A;
  --pv-cat-12: #3F7F8C;
  --pv-cat-other: #DEE0E3; --pv-cat-other-text: #646A73;

  /* 首页模块色：浅底 / 字 / 描边 */
  --pv-mod-travel-soft:  #E5EDF1; --pv-mod-travel-text:  #004972; --pv-mod-travel-line:  #B2C8D5;
  --pv-mod-tips-soft:    #E4F1EC; --pv-mod-tips-text:    #006446; --pv-mod-tips-line:    #B3D6C8;
  --pv-mod-finance-soft: #E0F5FC; --pv-mod-finance-text: #00739A; --pv-mod-finance-line: #A8E0F2;
  --pv-mod-gifts-soft:   #F8E4EA; --pv-mod-gifts-text:   #A4123F; --pv-mod-gifts-line:   #E8B6C5;
  --pv-mod-growth-soft:  #F2E4F5; --pv-mod-growth-text:  #87189D; --pv-mod-growth-line:  #DDBBE4;
  --pv-mod-family-soft:  #FAF1DE; --pv-mod-family-text:  #8A6100; --pv-mod-family-line:  #E8D3A2;
  --pv-mod-focus_projects-soft: #E8EBF8; --pv-mod-focus_projects-text: #3445A6; --pv-mod-focus_projects-line: #C3CAEE;
  --pv-mod-blank-soft:   #F5F6F7; --pv-mod-blank-text:   #646A73; --pv-mod-blank-line:   #DEE0E3;

  /* ---- 形状：飞书式偏方 ---- */
  --pv-radius: 8px;          /* 卡片 / 内容块（原 14） */
  --pv-radius-sm: 6px;       /* 控件 / 菜单项（原 10） */
  --pv-radius-btn: 6px;      /* 按钮 / 输入框（原 9） */
  --pv-radius-xs: 4px;       /* 小签 */
  --pv-radius-pill: 999px;

  /* ---- 投影：几乎不用，靠边线分层 ---- */
  --pv-shadow-sm: 0 1px 2px rgba(31, 35, 41, .04);
  --pv-shadow: 0 2px 8px rgba(31, 35, 41, .06);
  --pv-shadow-pop: 0 6px 24px rgba(31, 35, 41, .12);   /* 下拉 / 浮层 */
  --pv-shadow-drawer: -8px 0 32px rgba(31, 35, 41, .10);
  --pv-focus-ring: 0 0 0 3px rgba(0, 73, 114, .14);

  /* ---- 字号刻度 ---- */
  --pv-fs-xs: 12px;    /* 小签 / 说明 */
  --pv-fs-sm: 13px;    /* 按钮 / 表格 / 控件 */
  --pv-fs-md: 14px;    /* 正文 */
  --pv-fs-lg: 16px;    /* 卡片标题 / 抽屉标题 */
  --pv-fs-xl: 20px;    /* 区块标题 */
  --pv-fs-2xl: 24px;   /* 页标题 */
  --pv-fs-num: 28px;   /* 数字卡大数 */

  /* ---- 控件高度（沿用老顾的档）---- */
  --pv-h-input: 34px;  --pv-h-ctrl: 30px;  --pv-h-btn-sm: 28px;  --pv-h-icon: 26px;  --pv-h-tag: 20px;
  --pv-header-h: 52px;
}

/* ---- 套到老顾上：变量管不到的几处（只在 office 主题下生效）---- */
:root[data-theme="office"] body { font-family: var(--pv-font); }
:root[data-theme="office"] .el-switch.is-checked .el-switch__core { background-color: var(--pv-primary) !important; border-color: var(--pv-primary) !important; }
:root[data-theme="office"] .el-button--primary:hover, :root[data-theme="office"] .el-button--primary:focus { background: var(--pv-primary-hover); border-color: var(--pv-primary-hover); }
:root[data-theme="office"] .el-button--primary:active { background: var(--pv-primary-active); border-color: var(--pv-primary-active); }
:root[data-theme="office"] .pv-sidebar { background: #fff; backdrop-filter: none; }