/**
 * WEB 视觉真源（Style / 品牌）
 * - 母版出厂：紫雾轻写 — 亮色 :root + 暗色 html[data-theme=dark]:not([data-brand])
 * - 可选品牌皮：themes/*.css（各自亮+暗），经 html[data-brand] 激活（见 brand.js）
 * - 生成项目：scaffold 拷贝本文件后，按选定 *-style.md 整文件重写（勿叠两套；暗色写进本文件或交付所选品牌段）
 * - 改默认品牌色 / 字体 / 圆角 / CTA / 默认暗色：只改本文件；base.css 只管结构
 * - 切换：html[data-theme="dark"] + body[arco-theme="dark"]（见 assets/js/theme.js）；有品牌时页面 --wa-* 只吃该皮暗色
 */
@import url("../../fonts/index.css");
@import url("../themes/liangse-keji-lan.css");
@import url("../themes/baichang-ningshuo.css");
@import url("../themes/shuweicao-nuanzhi.css");

:root {
  /* 亮色显式声明，避免从暗色切回时原生滚动条仍按 dark scheme 着色 */
  color-scheme: light;
  /* 字体三槽（对齐 .style --font-sans|display|serif；母版加 wa- 前缀） */
  --wa-font-sans: "Inter", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --wa-font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --wa-font-serif: var(--wa-font-display);
  /* 行内代码 / 等宽：系统已装优先（SF Mono / Cascadia / Consolas），勿依赖 CDN */
  --wa-font-mono: "SF Mono", "Cascadia Code", "Consolas", "Segoe UI Mono", ui-monospace, monospace;
  /* 文字四级：1 主文 / 2 次文 / 3 辅文 / 4 禁用；中性黑透明度（muted=3） */
  --wa-color-text-1: #1a1a1a;
  --wa-color-text-2: rgba(0, 0, 0, 0.65);
  --wa-color-text-3: rgba(0, 0, 0, 0.45);
  --wa-color-text-4: rgba(0, 0, 0, 0.25);
  --wa-color-text: var(--wa-color-text-1);
  --wa-color-text-secondary: var(--wa-color-text-2);
  --wa-color-muted: var(--wa-color-text-3);
  /* 页底中性纯色；氛围渐变 --wa-gradient-page 仅营销/示范页按需引用 */
  --wa-color-bg: #f5f5f5;
  --wa-color-surface: #ffffff;
  /* 默认紫雾：改主色即可带动 soft / accent / 钮光晕 / 页氛围（Arco 色阶仍见 body --primary-*） */
  --wa-color-primary: #6c5ce7;
  --wa-color-accent: color-mix(in srgb, var(--wa-color-primary) 82%, #000);
  --wa-color-primary-soft: color-mix(in srgb, var(--wa-color-primary) 15%, transparent);
  /* 主色底上的字/图标：主色近白时品牌皮须改成深色（如白场暗色） */
  --wa-color-on-primary: #ffffff;
  /* App 壳「主色导航」铺色；品牌皮可在 html[data-brand] 覆盖（勿在 .wa-layout 再写死，否则盖不住） */
  --wa-shell-primary-bg: color-mix(in srgb, var(--wa-color-primary) 82%, #000);
  --wa-shell-primary-fg: var(--wa-color-on-primary);
  /* 描边三级：1 弱 / 2 默认 / 3 强；--wa-color-border 兼容别名 → 2 */
  --wa-color-border-1: rgba(0, 0, 0, 0.06);
  --wa-color-border-2: rgba(0, 0, 0, 0.1);
  --wa-color-border-3: rgba(0, 0, 0, 0.16);
  --wa-color-border: var(--wa-color-border-2);
  /* 浅底三级：1 弱 / 2 默认 / 3 强；中性黑透明度，不掺 muted/主色 */
  --wa-color-fill-1: rgba(0, 0, 0, 0.04);
  --wa-color-fill-2: rgba(0, 0, 0, 0.08);
  --wa-color-fill-3: rgba(0, 0, 0, 0.12);
  /* 描边配方：改粗细改 --wa-border-w
   * 卡 --wa-border-card：默认实线（card-default）
   * 区块 --wa-border-section：默认无边，靠 --wa-shadow-section 分层 */
  --wa-border-w: 1px;
  --wa-border-card: var(--wa-border-w) solid var(--wa-color-border-2);
  --wa-border-section: none;
  /* 卡阴影：贴面、短扩散（card-shadow / hoverable）；中性 */
  --wa-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.05);
  --wa-shadow-soft-hover: 0 4px 12px rgba(0, 0, 0, 0.05), 0 10px 22px rgba(0, 0, 0, 0.06);
  /* 区块阴影：更大扩散，与卡阴影分开 */
  --wa-shadow-section: 0 4px 12px rgba(0, 0, 0, 0.03), 0 14px 36px rgba(0, 0, 0, 0.07);
  --wa-shadow-lift: 0 8px 20px rgba(0, 0, 0, 0.12);
  --wa-shadow-lift-hover: 0 10px 24px rgba(0, 0, 0, 0.16);
  --wa-shadow-button: 0 0 20px 2px color-mix(in srgb, var(--wa-color-primary) 15%, transparent);
  --wa-shadow-button-hover: 0 10px 25px color-mix(in srgb, var(--wa-color-primary) 30%, transparent);
  /* 不规则紫雾：角晕跟主色；纸面轻染仍用固定浅紫阶（氛围，非控件浅底） */
  --wa-gradient-page:
    radial-gradient(ellipse 72% 48% at 92% 6%, color-mix(in srgb, var(--wa-color-primary) 14%, transparent), transparent 72%),
    radial-gradient(ellipse 48% 62% at 8% 78%, color-mix(in srgb, var(--wa-color-primary) 11%, transparent), transparent 70%),
    radial-gradient(ellipse 38% 28% at 58% 32%, color-mix(in srgb, var(--wa-color-primary) 8%, transparent), transparent 68%),
    radial-gradient(ellipse 44% 36% at 26% 14%, color-mix(in srgb, var(--wa-color-accent) 6%, transparent), transparent 66%),
    radial-gradient(ellipse 32% 46% at 74% 86%, color-mix(in srgb, var(--wa-color-primary) 7%, transparent), transparent 70%),
    linear-gradient(180deg, #faf9fc 0%, #f3f0f9 46%, #f6f4fb 100%);
  /* 圆角分层：卡面 < 大面；控件粒径可小于卡面，换肤时三档一起看 */
  --wa-radius: 12px;
  /* 更大圆角：弹窗 / 强调面板 / 大块 CTA 面 */
  --wa-radius-lg: 20px;
  /* 输入 / 选择 / 图标钮等轻控件（可小于 --wa-radius） */
  --wa-input-radius: 8px;
  /* 大号按钮；CTA 默认同 large，品牌可单独改（如白场胶囊） */
  --wa-btn-radius-lg: 10px;
  --wa-btn-radius-cta: var(--wa-btn-radius-lg);
  --wa-cta-h: 46px;
  --wa-cta-fs: 16px;
  --wa-ctrl-ring: 3px;
  /* outline 描边真源（默认=主色）；近白主色品牌暗色可降透明度，见 themes */
  --wa-btn-outline-bd: var(--wa-color-primary);
  --wa-btn-outline-muted-bd: color-mix(in srgb, var(--wa-color-primary) 28%, transparent);
  /* 弹层遮罩：中性灰、轻虚化（Modal / Drawer / Image Preview） */
  --wa-mask-bg: rgba(0, 0, 0, 0.32);
  --wa-mask-blur: 4px;
  --color-mask-bg: var(--wa-mask-bg);
  --wa-container: 1400px;
}

/*
 * 默认紫雾暗色（仅无 data-brand 时生效；与 brands 各自亮+暗对称）
 * 有品牌皮时切暗色：只吃该皮的 [data-theme=dark]，不再回落本段
 * Arco 控件描边/浅底走 arco-controls token，随 body[arco-theme=dark] 切换
 */
html[data-theme='dark']:not([data-brand]) {
  color-scheme: dark;

  --wa-color-text-1: rgba(255, 255, 255, 0.92);
  --wa-color-text-2: rgba(255, 255, 255, 0.65);
  --wa-color-text-3: rgba(255, 255, 255, 0.45);
  --wa-color-text-4: rgba(255, 255, 255, 0.3);
  --wa-color-text: var(--wa-color-text-1);
  --wa-color-text-secondary: var(--wa-color-text-2);
  --wa-color-muted: var(--wa-color-text-3);
  --wa-color-bg: #0d0d0d;
  --wa-color-surface: #1a1a1a;
  --wa-color-border-1: rgba(255, 255, 255, 0.06);
  --wa-color-border-2: rgba(255, 255, 255, 0.1);
  --wa-color-border-3: rgba(255, 255, 255, 0.18);
  --wa-color-border: var(--wa-color-border-2);
  --wa-border-w: 1px;
  --wa-border-card: var(--wa-border-w) solid var(--wa-color-border-2);
  --wa-border-section: none;
  --wa-color-primary: #6c5ce7;
  --wa-color-accent: color-mix(in srgb, var(--wa-color-primary) 82%, #000);
  --wa-color-primary-soft: color-mix(in srgb, var(--wa-color-primary) 22%, transparent);
  --wa-shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.28), 0 8px 22px rgba(0, 0, 0, 0.2);
  --wa-shadow-soft-hover: 0 6px 18px rgba(0, 0, 0, 0.32), 0 12px 28px rgba(0, 0, 0, 0.24);
  --wa-shadow-section: 0 20px 60px rgba(0, 0, 0, 0.45);
  --wa-shadow-lift: 0 8px 20px rgba(0, 0, 0, 0.32);
  --wa-shadow-lift-hover: 0 10px 24px rgba(0, 0, 0, 0.4);
  --wa-shadow-button: 0 0 20px 2px color-mix(in srgb, var(--wa-color-primary) 22%, transparent);
  --wa-shadow-button-hover: 0 10px 28px color-mix(in srgb, var(--wa-color-primary) 35%, transparent);
  --wa-mask-bg: rgba(0, 0, 0, 0.42);
  --wa-mask-blur: 4px;
  --color-mask-bg: var(--wa-mask-bg);
  --wa-gradient-page:
    radial-gradient(ellipse 72% 48% at 92% 6%, color-mix(in srgb, var(--wa-color-primary) 20%, transparent), transparent 72%),
    radial-gradient(ellipse 48% 62% at 8% 78%, color-mix(in srgb, var(--wa-color-primary) 15%, transparent), transparent 70%),
    radial-gradient(ellipse 38% 28% at 58% 32%, color-mix(in srgb, var(--wa-color-primary) 10%, transparent), transparent 68%),
    radial-gradient(ellipse 44% 36% at 26% 14%, color-mix(in srgb, var(--wa-color-accent) 8%, transparent), transparent 66%),
    radial-gradient(ellipse 32% 46% at 74% 86%, color-mix(in srgb, var(--wa-color-primary) 9%, transparent), transparent 70%),
    linear-gradient(180deg, #0e0c12 0%, #121018 46%, #100e16 100%);
}

/*
 * 暗色浅底 + 文字灰阶：所有暗色默认（含品牌皮未改写的级）
 * 品牌更具体的 --wa-color-text / muted 仍可覆盖别名；桥接优先吃别名
 */
html[data-theme='dark'] {
  --wa-color-fill-1: rgba(255, 255, 255, 0.06);
  --wa-color-fill-2: rgba(255, 255, 255, 0.1);
  --wa-color-fill-3: rgba(255, 255, 255, 0.16);
  --wa-color-text-1: rgba(255, 255, 255, 0.92);
  --wa-color-text-2: rgba(255, 255, 255, 0.65);
  --wa-color-text-3: rgba(255, 255, 255, 0.45);
  --wa-color-text-4: rgba(255, 255, 255, 0.3);
  --wa-color-text: var(--wa-color-text-1);
  --wa-color-text-secondary: var(--wa-color-text-2);
  --wa-color-muted: var(--wa-color-text-3);
}

/* 压过 Arco body[arco-theme=dark] 自带的 --color-mask-bg + 回蓝 */
html[data-theme='dark']:not([data-brand]) body,
html:not([data-brand]) body[arco-theme='dark'] {
  --color-mask-bg: var(--wa-mask-bg);
  /* 暗色阶：1–3 须深面（Alert info 描边吃 primary-2；勿照抄亮色浅紫） */
  --primary-1: 28, 24, 48;
  --primary-2: 42, 36, 72;
  --primary-3: 58, 48, 110;
  --primary-4: 78, 64, 160;
  --primary-5: 96, 80, 200;
  --primary-6: 108, 92, 231;
  --primary-7: 136, 124, 236;
  --primary-8: 168, 158, 240;
  --primary-9: 200, 193, 245;
  --primary-10: 228, 224, 250;
  --link-1: var(--primary-1);
  --link-2: var(--primary-2);
  --link-3: var(--primary-3);
  --link-4: var(--primary-4);
  --link-5: var(--primary-5);
  --link-6: var(--primary-6);
  --link-7: var(--primary-7);
  --link-8: var(--primary-8);
  --link-9: var(--primary-9);
  --link-10: var(--primary-10);
  --arcoblue-1: var(--primary-1);
  --arcoblue-2: var(--primary-2);
  --arcoblue-3: var(--primary-3);
  --arcoblue-4: var(--primary-4);
  --arcoblue-5: var(--primary-5);
  --arcoblue-6: var(--primary-6);
  --arcoblue-7: var(--primary-7);
  --arcoblue-8: var(--primary-8);
  --arcoblue-9: var(--primary-9);
  --arcoblue-10: var(--primary-10);
}

/*
 * 辅助色（Success / Warning / Danger；Info 仍走 Arco 主色）
 * 主色靠 shadcn / Tailwind 语义：#16A34A / #F59E0B / #EF4444（destructive 常用态）
 * 色阶按 mix(白/黑) 映射到 Arco 1–10（6 = 主色；数字越大越深）
 * 须写在 body：Arco 在 body 上把 --success-* 等指到 --green-*，仅改 :root 无效
 * 须写 RGB 通道，供 rgb(var(--*-6)) / rgba(var(--*-6), α) 使用
 * Tag 等用 color="red|green|orange" 走 --red/green/orange，须与语义色同步
 */
body {
  /* 默认紫雾：覆盖 Arco body 上的 --primary-* → arcoblue */
  --primary-1: 242, 240, 252;
  --primary-2: 228, 224, 250;
  --primary-3: 200, 193, 245;
  --primary-4: 168, 158, 240;
  --primary-5: 136, 124, 236;
  --primary-6: 108, 92, 231;
  --primary-7: 90, 75, 209;
  --primary-8: 72, 60, 180;
  --primary-9: 56, 46, 145;
  --primary-10: 40, 32, 110;
  --link-1: var(--primary-1);
  --link-2: var(--primary-2);
  --link-3: var(--primary-3);
  --link-4: var(--primary-4);
  --link-5: var(--primary-5);
  --link-6: var(--primary-6);
  --link-7: var(--primary-7);
  --link-8: var(--primary-8);
  --link-9: var(--primary-9);
  --link-10: var(--primary-10);
  /* Tag color="arcoblue" 等走 --arcoblue-*；桥到 primary，跟随品牌主色 */
  --arcoblue-1: var(--primary-1);
  --arcoblue-2: var(--primary-2);
  --arcoblue-3: var(--primary-3);
  --arcoblue-4: var(--primary-4);
  --arcoblue-5: var(--primary-5);
  --arcoblue-6: var(--primary-6);
  --arcoblue-7: var(--primary-7);
  --arcoblue-8: var(--primary-8);
  --arcoblue-9: var(--primary-9);
  --arcoblue-10: var(--primary-10);

  --success-1: 232, 246, 237;
  --success-2: 208, 237, 219;
  --success-3: 185, 227, 201;
  --success-4: 138, 209, 164;
  --success-5: 92, 191, 128;
  --success-6: 22, 163, 74;
  --success-7: 18, 130, 59;
  --success-8: 14, 106, 48;
  --success-9: 11, 82, 37;
  --success-10: 8, 57, 26;

  --warning-1: 254, 245, 231;
  --warning-2: 253, 236, 206;
  --warning-3: 252, 226, 182;
  --warning-4: 250, 206, 133;
  --warning-5: 248, 187, 84;
  --warning-6: 245, 158, 11;
  --warning-7: 196, 126, 9;
  --warning-8: 159, 103, 7;
  --warning-9: 122, 79, 6;
  --warning-10: 86, 55, 4;

  --danger-1: 253, 236, 236;
  --danger-2: 252, 218, 218;
  --danger-3: 250, 199, 199;
  --danger-4: 247, 162, 162;
  --danger-5: 244, 124, 124;
  --danger-6: 239, 68, 68;
  --danger-7: 191, 54, 54;
  --danger-8: 155, 44, 44;
  --danger-9: 120, 34, 34;
  --danger-10: 84, 24, 24;

  /* 与上面对齐：Tag / Badge 等预设色名 */
  --green-1: var(--success-1);
  --green-2: var(--success-2);
  --green-3: var(--success-3);
  --green-4: var(--success-4);
  --green-5: var(--success-5);
  --green-6: var(--success-6);
  --green-7: var(--success-7);
  --green-8: var(--success-8);
  --green-9: var(--success-9);
  --green-10: var(--success-10);

  --orange-1: var(--warning-1);
  --orange-2: var(--warning-2);
  --orange-3: var(--warning-3);
  --orange-4: var(--warning-4);
  --orange-5: var(--warning-5);
  --orange-6: var(--warning-6);
  --orange-7: var(--warning-7);
  --orange-8: var(--warning-8);
  --orange-9: var(--warning-9);
  --orange-10: var(--warning-10);

  --red-1: var(--danger-1);
  --red-2: var(--danger-2);
  --red-3: var(--danger-3);
  --red-4: var(--danger-4);
  --red-5: var(--danger-5);
  --red-6: var(--danger-6);
  --red-7: var(--danger-7);
  --red-8: var(--danger-8);
  --red-9: var(--danger-9);
  --red-10: var(--danger-10);

  /* 压过 Arco 默认 body：字体 / 字色 / 页底用纯色，勿把装饰渐变铺满全站 */
  font-family: var(--wa-font-sans);
  color: var(--wa-color-text);
  background: var(--wa-color-bg);
  -webkit-font-smoothing: antialiased;
}

/*
 * 选中高亮：跟主色（对齐 *-preview.html ::selection → brand-primary）
 * 字色用 --wa-color-on-primary，避免主色为白时白底白字糊成色块
 */
::selection {
  background: var(--wa-color-primary);
  color: var(--wa-color-on-primary);
}
::-moz-selection {
  background: var(--wa-color-primary);
  color: var(--wa-color-on-primary);
}

/*
 * 页面文字/描边/浅底 → Arco 控件桥
 * 改 --wa-color-text* / border-1…3 / fill-1…3（默认 / 品牌 / 暗色）后跟肤
 * 须盖 body[arco-theme=dark]，否则 Arco 暗色会把字色/边色/浅底打回灰阶
 * 文字桥优先吃品牌已写的 --wa-color-text / muted 别名
 */
body,
body[arco-theme='dark'] {
  --color-text-1: var(--wa-color-text);
  --color-text-2: var(--wa-color-text-secondary, var(--wa-color-text-2));
  --color-text-3: var(--wa-color-muted);
  --color-text-4: var(--wa-color-text-4);
  --color-border-1: var(--wa-color-border-1);
  --color-border-2: var(--wa-color-border-2);
  --color-border-3: var(--wa-color-border-3);
  /* Arco 偶用 4 级：在强边基础上再略加深 */
  --color-border-4: color-mix(in srgb, var(--wa-color-text) 18%, var(--wa-color-border-3));
  /* 浅底真源 --wa-color-fill-*（中性）；勿再用 muted 混色 */
  --color-fill-1: var(--wa-color-fill-1);
  --color-fill-2: var(--wa-color-fill-2);
  --color-fill-3: var(--wa-color-fill-3);
}

/* 暗色语义浅阶 1–3：深面通道，避免亮色浅绿/橙/红铺暗底发粉白（6 主色不变） */
html[data-theme='dark'] body,
body[arco-theme='dark'] {
  --success-1: 14, 36, 24;
  --success-2: 18, 48, 30;
  --success-3: 24, 64, 40;
  --warning-1: 40, 30, 12;
  --warning-2: 52, 38, 14;
  --warning-3: 70, 48, 16;
  --danger-1: 40, 16, 16;
  --danger-2: 54, 20, 20;
  --danger-3: 72, 26, 26;
}

/*
 * 字号阶 utility（对齐 Arco Design Token：display / title / body / caption）
 * 演示对照表壳仍在 components/type-scale/component.css；此处为全站可复用基线
 */
.wa-type-scale--display-3,
.wa-title.wa-type-scale--display-3 {
  font-family: var(--wa-font-display);
  font-size: 56px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.wa-type-scale--display-2,
.wa-title.wa-type-scale--display-2 {
  font-family: var(--wa-font-display);
  font-size: 48px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.wa-type-scale--display-1,
.wa-title.wa-type-scale--display-1 {
  font-family: var(--wa-font-display);
  font-size: 36px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.wa-type-scale--title-3 {
  font-size: 24px;
  line-height: 1.33;
  font-weight: 600;
}
.wa-type-scale--title-2 {
  font-size: 20px;
  line-height: 1.4;
  font-weight: 600;
}
.wa-type-scale--title-1 {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
}
.wa-type-scale--body-3 {
  font-size: 14px;
  line-height: 1.5715;
  font-weight: 400;
}
.wa-type-scale--body-2 {
  font-size: 13px;
  line-height: 1.5715;
  font-weight: 400;
}
.wa-type-scale--body-1 {
  font-size: 12px;
  line-height: 1.5715;
  font-weight: 400;
}
.wa-type-scale--caption {
  font-size: 12px;
  line-height: 1.5715;
  font-weight: 400;
  color: var(--wa-color-muted, var(--color-text-3));
}

@media (max-width: 640px) {
  .wa-type-scale--display-3,
  .wa-title.wa-type-scale--display-3 {
    font-size: 40px;
  }
  .wa-type-scale--display-2,
  .wa-title.wa-type-scale--display-2 {
    font-size: 34px;
  }
  .wa-type-scale--display-1,
  .wa-title.wa-type-scale--display-1 {
    font-size: 28px;
  }
}

/* KPI / 统计数值：默认吃 --wa-font-serif（对齐 .style；凝缩数字族挂这里，勿挂到 display） */
.arco-statistic-value {
  font-family: var(--wa-font-serif);
  font-variant-numeric: tabular-nums;
}

/* 行内代码标签（说明弹窗、文案中的路径 / 文件名等） */
code,
kbd,
samp {
  font-family: var(--wa-font-mono);
  font-size: 0.875em;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.12em 0.38em;
  border-radius: 4px;
  background: var(--wa-color-fill-2);
  color: var(--wa-color-text);
}

pre code {
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: inherit;
  font-weight: inherit;
}