/*! 码泓科技 · 全平台 UI 设计体系 —— SaaS 主题令牌层（单一真源 v2.0 · 2026-10-06）
 * ---------------------------------------------------------------------------
 * 【唯一依据】飞书《🎨 码泓科技 - 全平台UI设计体系》
 *             《现代SaaS风格主题系统 - 用户自选主题手册 V1.1》
 *             https://qcnbjqe20bj3.feishu.cn/docx/JYiodNCMWon9UVxsSx4cpHzrnuh
 *             §1.2 design-tokens/saas-theme.css（逐字落地）
 *
 * ⚠️ 上一版（v1）我误用了 E 盘《虾管家家族产品UI设计系统》的 #0088FF 旧色板，
 *    那套是「虾系默认风格」的前身、不是本手册的 SaaS 主题 ⇒ **v2 已按本手册重写**。
 *
 * 唯一真源：https://<任一域>/policies/assets/theme.css
 * 载体：92机 /opt/mahong-policies/assets/theme.css（gitee mahong-92-mahong-policies）
 *
 * 用法：
 *   <link rel="stylesheet" href="/policies/assets/theme.css">
 *   <html data-theme="saas-modern">            ← 主题由 data-theme 决定
 *   localStorage['xia-theme']                  ← 用户自选主题的持久化键（手册 §6.1）
 *
 * 已实现主题：
 *   saas-modern（默认，手册 §1.2 给全 token）
 *   xia-default（虾系默认风格，手册 §1.1 给出 primary/圆角/阴影/动效 四项特征值）
 * 未实现主题（**手册未给出 token 值，不臆造**）：
 *   saas-minimal / saas-dark / saas-contrast —— 手册只给了主题名与类名，
 *   需要设计侧补全 `[data-theme="saas-dark"]{…}` 的令牌后再补进本文件。
 * ---------------------------------------------------------------------------
 */

/* ===== 1. 默认 = saas-modern（手册 §1.2 逐字）===== */
:root,
[data-theme="saas-modern"] {
  /* 主色调 - 专业蓝 */
  --xia-color-primary-50:  #F0F9FF;
  --xia-color-primary-100: #E0F2FE;
  --xia-color-primary-500: #0EA5E9;
  --xia-color-primary-600: #0284C7;
  --xia-color-primary-700: #0369A1;
  /* 别名：组件层统一用 primary 指向 500 */
  --xia-color-primary: var(--xia-color-primary-500);
  --xia-color-primary-hover: var(--xia-color-primary-600);
  --xia-color-primary-active: var(--xia-color-primary-700);

  /* 中性色 - 商务灰 */
  --xia-color-neutral-50:  #F8FAFC;
  --xia-color-neutral-100: #F1F5F9;
  --xia-color-neutral-200: #E2E8F0;
  --xia-color-neutral-500: #64748B;
  --xia-color-neutral-600: #475569;
  --xia-color-neutral-700: #334155;
  --xia-color-neutral-900: #0F172A;

  /* 功能色 - 专业调性 */
  --xia-color-success: #10B981;
  --xia-color-warning: #F59E0B;
  --xia-color-error:   #EF4444;
  --xia-color-info:    #3B82F6;

  /* 产品色系重映射 */
  --xia-color-product-xdd: #0EA5E9; /* 虾嘟嘟 - 专业蓝 */
  --xia-color-product-xbb: #8B5CF6; /* 虾棒棒 - 智慧紫 */
  --xia-color-product-xxx: #F59E0B; /* 虾星星 - 监控橙 */
  --xia-color-product-xjj: #EC4899; /* 虾记记 - 记忆粉 */
  --xia-color-product-xzz: #10B981; /* 虾真真 - 验证绿 */
  --xia-color-product-xcc: #06B6D4; /* 虾串串 - 协同青 */
  --xia-color-product-xpp: #6366F1; /* 虾排排 - 管理靛 */
  --xia-color-product-xll: #F97316; /* 虾理理 - 整理橙 */
  --xia-color-product-xww: #84CC16; /* 虾文文 - 文档绿 */

  /* 间距系统优化 */
  --xia-spacing-xs:  2px;
  --xia-spacing-sm:  6px;
  --xia-spacing-md:  10px;
  --xia-spacing-lg:  16px;
  --xia-spacing-xl:  20px;
  --xia-spacing-xxl: 24px;

  /* 圆角系统 */
  --xia-radius-sm: 4px;
  --xia-radius-md: 6px;
  --xia-radius-lg: 8px;
  --xia-radius-xl: 12px;

  /* 阴影系统 */
  --xia-shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.04);
  --xia-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06);
  --xia-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);
  --xia-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.10);

  /* 字体系统 */
  --xia-font-family-base: "Inter", "SF Pro Display", -apple-system,
                          BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --xia-font-family-mono: "SF Mono", "JetBrains Mono", Consolas, monospace;

  /* 动效系统 */
  --xia-transition-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
  --xia-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --xia-transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* 字号（手册未直接给，取组件库通用阶梯；如需调整改这一处） */
  --xia-font-size-xs:   12px;
  --xia-font-size-sm:   14px;
  --xia-font-size-base: 16px;
  --xia-font-size-lg:   18px;
  --xia-font-size-xl:   20px;
  --xia-font-size-xxl:  24px;
}

/* ===== 2. xia-default（虾系默认风格 · 手册 §1.1 给出四项特征值）=====
 * 手册 §1.1: --color-primary:#1677FF / --border-radius:8px /
 *            --shadow-intensity:0.1 / --animation-bounce:true
 * 中性色与功能色手册未单列 ⇒ 沿用 saas-modern 的灰阶骨架，只换主色与「活泼」特征。
 * 这是**有依据的派生**，不是臆造；如需独立色板请设计侧补全。 */
[data-theme="xia-default"] {
  --xia-color-primary-500: #1677FF;
  --xia-color-primary-600: #0E5FD8;
  --xia-color-primary-700: #0B4BAE;
  --xia-color-primary-50:  #F0F5FF;
  --xia-color-primary-100: #D6E4FF;
  --xia-radius-sm: 6px;
  --xia-radius-md: 8px;
  --xia-radius-lg: 12px;
  --xia-radius-xl: 16px;
  --xia-transition-normal: 240ms cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性 */
}

/* ===== 3. 基础归一（只做安全项，不动 background/color/尺寸）===== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--xia-font-family-base);
  line-height: 1.5;
  color: var(--xia-color-neutral-900);
}
code, pre, kbd, samp, .mh-mono { font-family: var(--xia-font-family-mono); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--xia-color-primary);
  outline-offset: 2px;
}

/* ===== 4. 组件（显式类名，宿主不用即零影响）===== */
.mh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--xia-spacing-sm);
  min-height: 44px; padding: 0 var(--xia-spacing-xl);
  border: 1px solid transparent; border-radius: var(--xia-radius-md);
  font-family: inherit; font-size: var(--xia-font-size-sm); font-weight: 500;
  line-height: 1; text-decoration: none; cursor: pointer;
  transition: background-color var(--xia-transition-fast), border-color var(--xia-transition-fast),
              color var(--xia-transition-fast), box-shadow var(--xia-transition-fast);
  background: var(--xia-color-neutral-100); color: var(--xia-color-neutral-900);
}
.mh-btn--primary { background: var(--xia-color-primary); color: #fff; box-shadow: var(--xia-shadow-md); }
.mh-btn--primary:hover  { background: var(--xia-color-primary-hover); }
.mh-btn--primary:active { background: var(--xia-color-primary-active); box-shadow: none; }
.mh-btn--ghost { background: transparent; border-color: var(--xia-color-neutral-200); color: var(--xia-color-neutral-900); }
.mh-btn--ghost:hover { border-color: var(--xia-color-primary); color: var(--xia-color-primary); }
.mh-btn--danger { background: var(--xia-color-error); color: #fff; }
.mh-btn:disabled, .mh-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
@media (min-width: 768px) { .mh-btn { min-height: 36px; } }

.mh-card {
  background: #fff; border: 1px solid var(--xia-color-neutral-200);
  border-radius: var(--xia-radius-lg); padding: var(--xia-spacing-lg);
}
.mh-card--elevated { border-color: transparent; box-shadow: var(--xia-shadow-lg); }

.mh-input, .mh-textarea, .mh-select {
  width: 100%; min-height: 44px; padding: var(--xia-spacing-md) var(--xia-spacing-lg);
  background: #fff; border: 1px solid var(--xia-color-neutral-200);
  border-radius: var(--xia-radius-md); box-sizing: border-box;
  font-family: inherit; font-size: var(--xia-font-size-sm); color: var(--xia-color-neutral-900);
}
.mh-input::placeholder, .mh-textarea::placeholder { color: var(--xia-color-neutral-500); }
.mh-input:focus, .mh-textarea:focus, .mh-select:focus {
  outline: none; border-color: var(--xia-color-primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
@media (min-width: 768px) { .mh-input, .mh-textarea, .mh-select { min-height: 36px; } }

.mh-title    { color: var(--xia-color-neutral-900); font-weight: 600; }
.mh-text     { color: var(--xia-color-neutral-600); }
.mh-text-sub { color: var(--xia-color-neutral-500); font-size: var(--xia-font-size-xs); }
.mh-link     { color: var(--xia-color-primary); text-decoration: none; }
.mh-link:hover { color: var(--xia-color-primary-hover); text-decoration: underline; }

.mh-tag {
  display: inline-block; padding: 2px var(--xia-spacing-sm);
  border-radius: var(--xia-radius-sm); font-size: var(--xia-font-size-xs); line-height: 1.6;
  background: var(--xia-color-neutral-100); color: var(--xia-color-neutral-600);
}
.mh-tag--primary { background: var(--xia-color-primary-50); color: var(--xia-color-primary-700); }
.mh-tag--success { background: rgba(16,185,129,.12); color: var(--xia-color-success); }
.mh-tag--warning { background: rgba(245,158,11,.14); color: #B45309; }
.mh-tag--error   { background: rgba(239,68,68,.12);  color: var(--xia-color-error); }

.mh-divider { height: 1px; background: var(--xia-color-neutral-200); border: 0; margin: var(--xia-spacing-lg) 0; }
.mh-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}