/* ============================================================
   周公解梦 · 设计令牌 Design Tokens（版本2「HUD 夜空」风格）
   单一来源：颜色 / 字体 / 间距 / 圆角 / 边框 / 动效。
   新页面请优先使用本文件的 token 变量与 .hud-* 组件类，保持风格一致。
   分层：① 原子 Primitives → ② 语义 Semantic → ③ 组件 Component
   ============================================================ */
:root {
  /* ===== ① 原子 Primitives（原始值，不直接在业务里用） ===== */
  /* 紫色阶 */
  --p-violet-50:  #f1ecff;   /* 最亮：主文字 */
  --p-violet-100: #d6c9ff;   /* 主紫：标题 / 强调 */
  --p-violet-200: #b9a3ff;   /* 次紫：标签 / hover */
  --p-violet-400: #a99fce;   /* 正文 / 次要文字 */
  --p-violet-600: #6a5d9e;   /* 暗紫：弱文字 / 细线 */
  --p-pink:       #f2c2e4;   /* 状态点（在线/呼吸灯） */
  --p-night:      #04030d;   /* 夜空底色 */
  --p-ink:        #1a0f33;   /* 紫底之上的深色文字 */

  /* HUD 透明叠层（半透明，叠在夜空上） */
  --p-line:       rgba(200,182,255,.32);  /* 主描边 / 分隔线 */
  --p-line-faint: rgba(200,182,255,.10);  /* 弱描边 */
  --p-fill:       rgba(185,163,255,.08);  /* 浅填充：标签 / 选项 */
  --p-fill-hover: rgba(185,163,255,.12);  /* 浅填充 hover */
  --p-surface:    rgba(24,16,46,.55);     /* 卡片底 */
  --p-surface-in: rgba(28,18,58,.40);     /* 输入框底 */
  --p-surface-tip:rgba(18,11,38,.90);     /* 悬浮提示底 */

  /* 语义色（吉凶 / 危险等，保留少量彩色语义） */
  --p-danger:        #e58a8a;
  --p-danger-fill:   rgba(229,138,138,.12);
  --p-danger-line:   rgba(229,138,138,.35);

  /* ===== ② 语义 Semantic（按用途取用） ===== */
  --bg:            var(--p-night);
  --surface:       var(--p-surface);      /* 卡片 */
  --surface-input: var(--p-surface-in);   /* 输入 */
  --surface-tip:   var(--p-surface-tip);  /* tooltip */

  --border:        var(--p-line);
  --border-faint:  var(--p-line-faint);
  --fill:          var(--p-fill);
  --fill-hover:    var(--p-fill-hover);

  --text:          var(--p-violet-50);    /* 主文字 */
  --text-dim:      var(--p-violet-400);   /* 正文 / 次要 */
  --text-muted:    var(--p-violet-600);   /* 弱文字 / 计数 */
  --accent:        var(--p-violet-100);   /* 强调 / 标题 */
  --accent-soft:   var(--p-violet-200);   /* 次强调 / 标签 */
  --on-accent:     var(--p-ink);          /* 紫色实底上的文字 */
  --status:        var(--p-pink);         /* 状态点 */

  --danger:        var(--p-danger);
  --danger-fill:   var(--p-danger-fill);
  --danger-line:   var(--p-danger-line);

  /* ===== ③ 字体 Typography ===== */
  --font-sans: -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono: ui-monospace,"SF Mono","Roboto Mono",Menlo,monospace;
  --font-seal: "wdxzt","文道现代篆书","WenDao Modern Seal","FZXiaoZhuanTi","Songti SC",serif;

  --fs-display: 30px;  /* 主标题（篆体） */
  --fs-title:   16px;  /* 卡片标题 */
  --fs-body:    15px;  /* 正文 */
  --fs-sm:      13px;  /* 小正文 */
  --fs-label:   10px;  /* 等宽小标签 */
  --fs-micro:   9px;   /* 极小标签 */

  --ls-display: 14px;  /* 标题字距 */
  --ls-label:   4px;   /* 标签字距 */
  --ls-loose:   6px;   /* 加宽字距 */
  --ls-base:    1px;

  --fw-light: 300;
  --fw-reg:   400;

  /* ===== ④ 圆角 / 边框 / 间距 ===== */
  --radius:      2px;    /* HUD 直角风：统一 2px */
  --radius-pill: 999px;
  --border-w:    1px;

  --space-1: 8px;
  --space-2: 14px;
  --space-3: 18px;
  --space-4: 24px;
  --space-6: 40px;
  --space-8: 64px;

  /* ===== ⑤ 阴影 / 光晕 / 动效 ===== */
  --glow-focus: 0 0 40px rgba(170,130,240,.18);
  --glow-soft:  0 0 28px rgba(185,163,255,.35);
  --blur-glass: blur(10px);
  --ease:  cubic-bezier(.22,.61,.36,1);
  --dur:   .3s;
  --dur-slow: .4s;

  /* ===== ⑥ 兼容别名：旧代码里的 --v2-* 一律指向上面的 token =====
     （home-v2.css 仍在使用 --v2-*；值完全不变，纯指针） */
  --v2-bg:          var(--bg);
  --v2-violet:      var(--accent);
  --v2-violet-soft: var(--accent-soft);
  --v2-violet-dim:  var(--text-muted);
  --v2-pink:        var(--status);
  --v2-hud:         var(--border);
  --v2-hud-faint:   var(--border-faint);
  --v2-text:        var(--text);
  --v2-text-dim:    var(--text-dim);
  --v2-mono:        var(--font-mono);
  --v2-sans:        var(--font-sans);
}

/* ============================================================
   可复用组件类 .hud-*（全部由上面的 token 拼装）
   新 UI 直接套这些类即可保持一致，无需手写颜色/边框。
   ============================================================ */

/* 卡片：半透明深底 + 发丝边 + 直角 */
.hud-card {
  background: var(--surface);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border: var(--border-w) solid var(--border-faint);
  border-radius: var(--radius);
  padding: var(--space-4);
}

/* 篆体主标题 */
.hud-display {
  font-family: var(--font-seal);
  font-size: var(--fs-display);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-display);
  color: var(--accent);
  text-shadow: 0 0 34px rgba(200,182,255,.5);
}

/* 卡片标题（紫色，细体） */
.hud-title {
  font-family: var(--font-sans);
  font-size: var(--fs-title);
  font-weight: var(--fw-light);
  letter-spacing: 3px;
  color: var(--accent);
}

/* 等宽小标签（小节标题 / 字段名 / eyebrow） */
.hud-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-soft);
}

/* 正文 */
.hud-text {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.9;
  letter-spacing: .5px;
  color: var(--text-dim);
}

/* 输入框 / 文本域 */
.hud-input {
  background: var(--surface-input);
  border: var(--border-w) solid var(--border-faint);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  letter-spacing: .5px;
  padding: var(--space-2) var(--space-3);
  outline: none;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.hud-input::placeholder { color: #6f6298; }
.hud-input:focus { border-color: var(--border); box-shadow: var(--glow-focus); }

/* 按钮：等宽镂空紫 */
.hud-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  color: var(--accent);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: 9px 24px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: all .35s var(--ease);
}
.hud-btn:hover:not(:disabled) {
  background: var(--fill-hover);
  color: #fff;
  border-color: var(--accent-soft);
  box-shadow: var(--glow-soft);
}
.hud-btn:disabled { opacity: .5; cursor: not-allowed; }

/* 危险 / 删除按钮 */
.hud-btn--danger {
  color: var(--danger);
  border-color: var(--danger-line);
}
.hud-btn--danger:hover:not(:disabled) {
  background: var(--danger-fill);
  color: #ffb3b3;
  border-color: var(--danger);
  box-shadow: none;
}

/* 纯文字按钮（无容器，如「清空」） */
.hud-btn-text {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 2px;
  color: var(--text-muted);
  transition: color .25s;
}
.hud-btn-text:hover { color: var(--accent-soft); }

/* 小片标签 / chip */
.hud-chip {
  background: var(--fill);
  border: var(--border-w) solid var(--border-faint);
  border-radius: var(--radius);
  color: var(--accent);
  font-size: var(--fs-sm);
  padding: 4px 10px;
}

/* 分隔线 */
.hud-divider { border: none; border-top: var(--border-w) solid var(--border-faint); }