/* ═══════════════════════════════════════════════════════════════════
   黑白云 (heibaiyun) 品牌设计令牌 v4 —「宣纸墨印 · 紫檀点朱」
   [2026-10-08] 第四轮重做：回应「纯黑白太费眼 / 色系别太死板」，同时为
   布局重构（v4「墨脊长卷」）提供令牌基础。
   变化：墨改暖黑、纸改暖白、底改暖米、引入唯一点缀色（紫檀）、
        描边分三级、硬偏移影改为暖调柔影（"硬印"仅保留给 logo 与主按钮）。
   约束：点缀色只出现在可交互元素上（每屏着墨面积 ≤3%）；
        所有黑白云样式只消费本文件变量，禁止硬编码颜色。
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ═══ 墨与纸（暖调，降低眩光与残影） ═══ */
    --bw-ink:            #221D17;   /* 松烟墨：主色块、主按钮底、深色面 */
    --bw-ink-hover:      #3A322A;
    --bw-ink-active:     #171310;
    --bw-ink-soft:       rgba(34, 29, 23, .06);
    --bw-paper:          #FDFAF6;   /* 宣纸白：面板/卡片面 */
    --bw-paper-deep:     #F7F1E8;

    /* ═══ 中性暖灰阶 ═══ */
    --bw-bg-page:        #F3EDE4;   /* 页面底（面积最大，最影响舒适度） */
    --bw-bg-surface:     #FDFAF6;
    --bw-bg-sunken:      #EAE3D7;
    --bw-bg-hover:       #F7F2EA;
    --bw-bg-active:      #E2DACB;

    /* ═══ 边框：分三级，避免满屏强描边 ═══ */
    --bw-border:         #DAD1C0;   /* L3 次级分隔（装饰，禁止作可交互边界） */
    --bw-border-strong:  #8D8069;   /* 可交互边界（对纸 3.72:1 ✓） */
    --bw-hairline:       #B8AC96;   /* 模块线（表头/区块），非交互 */
    --bw-divider:        rgba(34, 29, 23, .10);
    --bw-border-ink:     #2A231C;   /* L1 关键描边（仅弹窗/焦点片/logo） */

    /* ═══ 文本层级 ═══ */
    --bw-text-primary:   #241E18;   /* 对纸 15.84:1 */
    --bw-text-secondary: #5B5344;
    --bw-text-muted:     #7C7263;   /* 仅限纸/白面（4.54:1） */
    --bw-text-muted-on-tint: #6E6454; /* 灰底/暖底通吃档（全底 ≥4.5） */
    --bw-text-disabled:  #A99E8B;   /* 仅装饰/占位，禁止承载信息 */
    --bw-text-inverse:   #FBF7F1;
    /* 深色面（墨底）上的文字 */
    --bw-on-ink-secondary: #C9C0B2;
    --bw-on-ink-muted:     #A79C8C;
    --bw-on-ink-accent:    #CDA9CD;

    /* ═══ 点缀色：紫檀（唯一交互强调色） ═══ */
    --bw-accent:         #6B4A6B;
    --bw-accent-hover:   #5A3D5A;
    --bw-accent-active:  #4B324B;
    --bw-accent-soft:    #F2EBF2;
    --bw-accent-border:  #C9B3C9;   /* 装饰级（禁止作唯一边界） */
    /* 点缀色 2：深墨青，仅用于数据可视化第二序列 */
    --bw-accent-2:       #37615C;
    --bw-accent-2-soft:  #E6EFED;

    /* ═══ 语义色 ═══ */
    --bw-success:        #2E6B4A;
    --bw-success-bg:     #E6F0E8;
    --bw-success-border: #A8C6B2;
    --bw-warning:        #8A5A0B;
    --bw-warning-bg:     #F9EFD8;
    --bw-warning-border: #DEC48A;
    --bw-danger:         #A82A1E;
    --bw-danger-bg:      #FAE8E4;
    --bw-danger-border:  #E1AEA4;
    --bw-info:           #37615C;   /* 信息态用墨青，不引蓝 */
    --bw-info-bg:        #E6EFED;

    /* ═══ 圆角（放大，软化笔直感） ═══ */
    --bw-radius-xs:      3px;
    --bw-radius-sm:      8px;
    --bw-radius-md:      12px;
    --bw-radius-lg:      16px;
    --bw-radius-xl:      22px;
    --bw-radius-2xl:     30px;
    --bw-radius-pill:    999px;
    --bw-radius-disc:    50%;
    --bw-radius-none:    0;

    /* ═══ 阴影：暖调柔影为主，"硬印"只留两处签名 ═══ */
    --bw-shadow-xs:      0 1px 2px rgba(60, 45, 30, .05);
    --bw-shadow-sm:      0 1px 3px rgba(60, 45, 30, .07), 0 1px 2px rgba(60, 45, 30, .05);
    --bw-shadow:         0 2px 8px rgba(60, 45, 30, .08), 0 1px 3px rgba(60, 45, 30, .05);
    --bw-shadow-md:      var(--bw-shadow);
    --bw-shadow-lg:      0 8px 24px rgba(60, 45, 30, .10), 0 2px 6px rgba(60, 45, 30, .06);
    --bw-shadow-overlay: 0 16px 40px rgba(50, 38, 25, .18);
    /* 品牌签名：仅 logo 圆盘与主 CTA 使用 */
    --bw-shadow-stamp:   2px 2px 0 0 rgba(34, 29, 23, .85);
    --bw-shadow-none:    none;

    /* ═══ 纹理（减半，且严禁铺在正文下） ═══ */
    --bw-dots-image: radial-gradient(rgba(34, 29, 23, .07) 1.1px, transparent 1.2px);
    --bw-dots-size:  9px 9px;
    --bw-grid-image: linear-gradient(rgba(34, 29, 23, .03) 1px, transparent 1px);
    --bw-grid-size:  28px 28px;

    /* ═══ 动效与字排 ═══ */
    --bw-ease:           cubic-bezier(.22, 1, .36, 1);
    --bw-transition:     .18s var(--bw-ease);
    --bw-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --bw-fs-body:        14px;
    --bw-lh-body:        1.65;
    --bw-fw-body:        400;
    --bw-fw-strong:      600;   /* 禁止 700+（中文小字号粗体发糊、加重眼疲劳） */

    /* ═══ 尺寸与焦点 ═══ */
    --bw-header-h:       56px;   /* v4 横向墨脊高度 */
    --bw-sidebar-w:      220px;  /* 保留：≤1024px 回退为图标轨道时使用 */
    --bw-focus-ring:     0 0 0 2px var(--bw-paper), 0 0 0 4px var(--bw-accent);
    /* v3 硬影名过渡别名（旧皮肤仍引用；新代码请用上面的柔影令牌） */
    --bw-shadow-hard-sm: var(--bw-shadow-xs);
    --bw-shadow-hard:    var(--bw-shadow-sm);
    --bw-shadow-hard-lg: var(--bw-shadow);
    --bw-shadow-hard-mute: var(--bw-shadow-xs);
}

/* ═══ 基础作用域 ═══ */
.pp-scope,
.pp-scope *,
.pp-scope *::before,
.pp-scope *::after { box-sizing: border-box; }

.pp-scope {
    font-family: var(--bw-font);
    font-size: var(--bw-fs-body);
    line-height: var(--bw-lh-body);
    font-weight: var(--bw-fw-body);
    color: var(--bw-text-primary);
    background-color: var(--bw-bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ═══ 组件层（结构性元素不再叠强描边，层次靠纸底/柔影/细线） ═══ */

/* ── 纸面片（L2 结构级：无强描边 + 柔影） ── */
.pp-card,
.pp-glass,
.pp-plate {
    background: var(--bw-bg-surface);
    border: 1px solid var(--bw-border);
    border-radius: var(--bw-radius-lg);
    box-shadow: var(--bw-shadow-sm);
    padding: 16px;
}
.pp-card-hover { transition: box-shadow var(--bw-transition), transform var(--bw-transition); }
.pp-card-hover:hover { box-shadow: var(--bw-shadow); transform: translateY(-1px); }

/* ── 焦点片（L1 关键级：唯一保留墨描边 + 硬印的容器） ── */
.pp-focus-sheet {
    background: var(--bw-bg-surface);
    border: 1px solid var(--bw-border-ink);
    border-radius: var(--bw-radius-md);
    box-shadow: var(--bw-shadow-stamp);
}

.pp-dotted { background-image: var(--bw-dots-image); background-size: var(--bw-dots-size); }
.pp-gridly { background-image: var(--bw-grid-image); background-size: var(--bw-grid-size); }

/* ── 按钮 ── */
.pp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--bw-border-strong);
    border-radius: var(--bw-radius-sm);
    background: var(--bw-bg-surface);
    color: var(--bw-text-primary);
    font-family: var(--bw-font);
    font-size: 13px;
    font-weight: var(--bw-fw-strong);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--bw-transition), box-shadow var(--bw-transition),
                border-color var(--bw-transition), transform var(--bw-transition);
}
.pp-btn:hover { background: var(--bw-bg-hover); border-color: var(--bw-ink); }
.pp-btn:active { transform: translateY(1px); }
.pp-btn:focus-visible { outline: none; box-shadow: var(--bw-focus-ring); }
.pp-btn:disabled,
.pp-btn[disabled] {
    border-style: dashed;
    border-color: var(--bw-text-disabled);
    color: var(--bw-text-disabled);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* 主按钮 = 紫檀 + 品牌硬印（全站少数保留"硬印"的元素之一） */
.pp-btn-primary {
    background: var(--bw-accent);
    border-color: var(--bw-accent);
    color: var(--bw-text-inverse);
    box-shadow: var(--bw-shadow-stamp);
}
.pp-btn-primary:hover { background: var(--bw-accent-hover); border-color: var(--bw-accent-hover); }
.pp-btn-primary:active { transform: translate(2px, 2px); box-shadow: none; }
.pp-btn-primary:disabled { background: var(--bw-bg-sunken); border-color: var(--bw-text-disabled); color: var(--bw-text-disabled); box-shadow: none; }

.pp-btn-soft { background: var(--bw-accent-soft); border-color: var(--bw-border-strong); color: var(--bw-accent-active); }
.pp-btn-soft:hover { background: var(--bw-accent-border); border-color: var(--bw-accent); }
.pp-btn-ghost {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--bw-text-secondary);
    border-radius: 0;
    border-bottom: 2px solid transparent;
}
.pp-btn-ghost:hover { color: var(--bw-accent); background: transparent; border-bottom-color: var(--bw-accent); }
.pp-btn-iris { background: var(--bw-accent); border-color: var(--bw-accent); color: var(--bw-text-inverse); }
.pp-btn-sm { height: 30px; padding: 0 12px; font-size: 12px; }
.pp-btn-block { width: 100%; }

/* ── 表单（可交互边界必须用 border-strong，≥3:1） ── */
.pp-input,
.pp-select,
.pp-textarea {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--bw-border-strong);
    border-radius: var(--bw-radius-sm);
    background: var(--bw-bg-surface);
    color: var(--bw-text-primary);
    font-family: var(--bw-font);
    font-size: 13px;
    outline: none;
    transition: border-color var(--bw-transition), box-shadow var(--bw-transition);
}
.pp-textarea { height: auto; min-height: 88px; padding: 10px 12px; line-height: var(--bw-lh-body); resize: vertical; }
.pp-input::placeholder,
.pp-textarea::placeholder { color: var(--bw-text-muted-on-tint); }
.pp-input:focus,
.pp-select:focus,
.pp-textarea:focus { border-color: var(--bw-accent); box-shadow: var(--bw-focus-ring); }

/* ── 标签 ── */
.pp-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border: 1px solid var(--bw-border);
    border-radius: var(--bw-radius-pill);
    background: var(--bw-bg-surface);
    font-size: 11.5px;
    font-weight: var(--bw-fw-strong);
    line-height: 1.7;
    color: var(--bw-text-secondary);
}
.pp-tag-primary,
.pp-tag-secondary,
.pp-tag-accent { background: var(--bw-accent-soft); border-color: var(--bw-accent-border); color: var(--bw-accent-active); }
.pp-tag-success { color: var(--bw-success); background: var(--bw-success-bg); border-color: var(--bw-success-border); }
.pp-tag-warning { color: var(--bw-warning); background: var(--bw-warning-bg); border-color: var(--bw-warning-border); }
.pp-tag-danger  { color: var(--bw-danger);  background: var(--bw-danger-bg);  border-color: var(--bw-danger-border); }
.pp-tag-muted   { color: var(--bw-text-muted-on-tint); background: var(--bw-bg-sunken); border-color: var(--bw-border); }

/* ── 表格（L3 分组级：仅细线） ── */
.pp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}
.pp-table thead th {
    background: transparent;
    color: var(--bw-text-secondary);
    font-weight: var(--bw-fw-strong);
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--bw-hairline);
    white-space: nowrap;
}
.pp-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--bw-divider);
    color: var(--bw-text-primary);
}
.pp-table tbody tr:hover td { background: var(--bw-bg-hover); }

/* ── 分隔线 / 滚动条 ── */
.pp-divider { height: 1px; background: var(--bw-divider); border: 0; margin: 14px 0; }
.pp-rule { border: 0; border-top: 1px solid var(--bw-hairline); margin: 0; }
.pp-scope ::-webkit-scrollbar { width: 12px; height: 12px; }
.pp-scope ::-webkit-scrollbar-track { background: var(--bw-bg-page); }
.pp-scope ::-webkit-scrollbar-thumb {
    background: var(--bw-border-strong);
    border: 3px solid var(--bw-bg-page);
    border-radius: var(--bw-radius-pill);
}
.pp-scope ::-webkit-scrollbar-thumb:hover { background: var(--bw-ink); }

/* ── 墨印徽章 / 状态点（形态优先） ── */
.pp-disc {
    border-radius: var(--bw-radius-disc);
    border: 1px solid var(--bw-border-ink);
    background: var(--bw-bg-surface);
    box-shadow: var(--bw-shadow-stamp);
    overflow: hidden;
}
.pp-dot-on  { width: 8px; height: 8px; border-radius: 50%; background: var(--bw-success); }
.pp-dot-off { width: 8px; height: 8px; border-radius: 50%; background: transparent; border: 2px solid var(--bw-text-muted-on-tint); }

@media (prefers-reduced-motion: reduce) {
    .pp-scope *, .pp-scope *::before, .pp-scope *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   v5 扩展：功能性分类色（色彩职能审计结论）
   用途：KPI 分类、状态、数据强调、类型标签——**只用于小面积语义元素**，
        禁止大面积铺底、禁止彩色正文段落、禁止装饰性渐变。
   每族三形态：base（条/点/图形，≥3:1 对底）/ tint（8% 淡底，仅铺纸面）/
              ink（tint 底上的文字，≥4.5:1）
   用量约束：单屏可见色相 ≤6，淡底元素 ≤12，实心彩色 ≤3。
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --bw-c-green:   #2E6B4A;  --bw-c-green-tint:  #E6F0E8;  --bw-c-green-ink:  #245840;
    --bw-c-teal:    #37615C;  --bw-c-teal-tint:   #E6EFED;  --bw-c-teal-ink:   #2B4C48;
    --bw-c-blue:    #45607E;  --bw-c-blue-tint:   #E9EDF3;  --bw-c-blue-ink:   #3A5069;
    --bw-c-amber:   #8A5A0B;  --bw-c-amber-tint:  #F9EFD8;  --bw-c-amber-ink:  #6E4A0D;
    --bw-c-orange:  #B4652F;  --bw-c-orange-tint: #F7EBDF;  --bw-c-orange-ink: #8F4E22;
    --bw-c-red:     #A82A1E;  --bw-c-red-tint:    #FAE8E4;  --bw-c-red-ink:    #88231A;
    --bw-c-rose:    #A34A5E;  --bw-c-rose-tint:   #F8EAEE;  --bw-c-rose-ink:   #7F3B4B;
    --bw-c-purple:  #6B4A6B;  --bw-c-purple-tint: #F2EBF2;  --bw-c-purple-ink: #5A3D5A;
    --bw-c-violet:  #7C5B92;  --bw-c-violet-tint: #EFEAF4;  --bw-c-violet-ink: #66497C;
    --bw-c-ink:     #3A322A;  --bw-c-ink-tint:    #EFEAE2;  --bw-c-ink-ink:    #2A241D;
    --bw-c-slate:   #6B6152;  --bw-c-slate-tint:  #EFEBE3;  --bw-c-slate-ink:  #4E4839;
}

/* ═══════════════════════════════════════════════════════════════════
   v6 扩展：功能性控件的「实心淡底」档（22% 混算的静态色值）
   背景：v5 用 color-mix(--k 8%) 作常驻底，实测混出结果≈纸白（饱和度<3%），
        且老内核浏览器不支持 color-mix 会回落纸白 → 呈现「白底+黑字」，
        运营反馈「按钮没有背景色渲染、直接用黑色字体」。
   用法：功能性芯片/按钮的常驻底 = --bw-c-*-bg（22%）；
        hover = --bw-c-*-bg-h（各族按对比度封顶 24-30%）；
        底上文字 = --bw-c-*-ink（全部 >=4.69:1）；描边 = --bw-c-*（>=3.18:1）。
   注意：这些是静态色值，不依赖 color-mix，保证老浏览器一致。
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --bw-c-green-bg:  #CFDBD0;  --bw-c-green-bg-h:  #BFCFC2;
    --bw-c-teal-bg:   #D1D8D4;  --bw-c-teal-bg-h:   #C2CCC8;
    --bw-c-blue-bg:   #D5D8DC;  --bw-c-blue-bg-h:   #C6CCD2;
    --bw-c-orange-bg: #EDD9CA;  --bw-c-orange-bg-h: #EBD6C6;
    --bw-c-red-bg:    #EACCC6;  --bw-c-red-bg-h:    #E4BCB5;
    --bw-c-rose-bg:   #E9D3D5;  --bw-c-rose-bg-h:   #E2C5C8;
    --bw-c-purple-bg: #DDD3D7;  --bw-c-purple-bg-h: #D1C5CC;
    --bw-c-violet-bg: #E1D7E0;  --bw-c-violet-bg-h: #D6CAD8;
    --bw-c-amber-bg:  #E4D7C2;  --bw-c-amber-bg-h:  #DACAB0;
    --bw-c-ink-bg:    #D2CEC9;  --bw-c-ink-bg-h:    #C2BEB9;
    --bw-c-slate-bg:  #DDD8D2;  --bw-c-slate-bg-h:  #D1CCC5;
}