/* =============================================================================
   君安舆情对抗演练系统 · 设计令牌（Design Tokens）v1.0
   规范来源：docs/design/DESIGN-SYSTEM.md v1.0
   -----------------------------------------------------------------------------
   本文件是全项目**唯一**允许出现字面颜色值的位置。
   任何组件样式只允许通过 var(--token) 引用，不得再写 hex / rgb / rgba / 颜色名。

   核心原则（DESIGN-SYSTEM 2.1）：
   颜色是稀缺资源，只用于表达状态与阵营；
   层级靠字号 / 字重 / 间距 / 边界建立，而不是靠色块堆叠。
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------------
     1. 表面（Surface）：从页面底到浮起层，逐级 +1 明度
     这是暗色主题下表达层级的主要手段，优先于阴影。
     2026-10-12 调整为蓝相基色：全站基调为蓝，明度分层同时保持蓝相（约 H 218-222），
     避免"黑灰底 + 几处蓝点"导致系统失去身份色。
     ------------------------------------------------------------------------ */
  --surface-0: #0a1120; /* 页面底 · 深蓝 */
  --surface-1: #101a30; /* 卡片 */
  --surface-2: #16233d; /* 浮起 / 悬停 */
  --surface-3: #1d2d4c; /* 高亮 / 激活 */

  /* ---------------------------------------------------------------------------
     2. 边界（Border）：唯一的分隔手段，比色块更克制
     卡片默认 subtle，悬停 default，选中/强调 strong。带蓝相以贴合基底。
     ------------------------------------------------------------------------ */
  --border-subtle: #1d2c48;
  --border-default: #2a3d5e;
  --border-strong: #3a5178;

  /* ---------------------------------------------------------------------------
     3. 文本（Text）：四级，每级对应明确的语义角色
     primary 标题与关键数据 / secondary 正文 / tertiary 辅助说明 / disabled
     略带蓝调的中性色，避免纯灰在蓝底上显得脏。
     ------------------------------------------------------------------------ */
  --text-primary: #e9eff9;
  --text-secondary: #a3b4d0;
  --text-tertiary: #7488a8;
  --text-disabled: #4c5f7d;

  /* ---------------------------------------------------------------------------
     4. 强调（Accent）：蓝色主操作色，用于交互焦点与关键动作
     用略深于侧蓝的一档，避免与阵营蓝混淆，同时在深蓝底上有足够对比。
     ------------------------------------------------------------------------ */
  --accent: #3b8ef0;
  --accent-hover: #5aa5f5;
  --accent-muted: rgba(59, 142, 240, 0.14);
  --accent-border: rgba(59, 142, 240, 0.42);

  /* 强调色上的前景（accent 底色上的文字/图标） */
  --accent-fg: #071022;

  /* ---------------------------------------------------------------------------
     5. 语义状态（Semantic）：表达状态，不是装饰
     每种状态都有前景色 + 极低饱和背景色成对出现。
     ------------------------------------------------------------------------ */
  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.1);
  --success-border: rgba(52, 211, 153, 0.32);

  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.1);
  --warning-border: rgba(251, 191, 36, 0.32);

  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.1);
  --danger-border: rgba(248, 113, 113, 0.42);

  --info: #60a5fa;
  --info-bg: rgba(96, 165, 250, 0.1);
  --info-border: rgba(96, 165, 250, 0.32);

  /* ---------------------------------------------------------------------------
     6. 阵营（Side）：红蓝对抗，全项目仅此两处用色，需高辨识度
     严禁在其他语境复用阵营色，避免语义混淆。
     2026-10-12：底色转蓝后，红方在蓝底上会被"冷化"，故红方提亮一档、
     tint 略加深以补偿；蓝方则与主色区分（--accent 为主操作蓝，--side-blue 偏浅）
     ------------------------------------------------------------------------ */
  --side-red: #ff8b9b;
  --side-red-bg: rgba(255, 107, 129, 0.16);
  --side-red-border: rgba(255, 107, 129, 0.45);

  --side-blue: #7ab4ff;
  --side-blue-bg: rgba(90, 165, 245, 0.16);
  --side-blue-border: rgba(90, 165, 245, 0.45);

  /* ---------------------------------------------------------------------------
     7. 字体阶梯（9 级）
     每级必须显式写 line-height —— 中文正文行距不足是本项目首要问题。
     拆成 --fs-* / --lh-* / --ls-* 三元组，便于组件按需只覆盖其中一项。
     ------------------------------------------------------------------------ */
  --font-sans: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei",
    "Source Han Sans SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 页面主标题 —— 仅 setup / 登录区用一次 */
  --fs-display: 28px;
  --lh-display: 1.25;
  --ls-display: -0.01em;

  /* 区块标题 */
  --fs-h1: 22px;
  --lh-h1: 1.35;
  --ls-h1: -0.005em;

  /* 小节标题 */
  --fs-h2: 17px;
  --lh-h2: 1.45;
  --ls-h2: 0;

  /* 卡片标题 */
  --fs-h3: 15px;
  --lh-h3: 1.5;
  --ls-h3: 0;

  /* 正文 —— 中文需要比西文更大的行高 */
  --fs-body: 14px;
  --lh-body: 1.7;
  --ls-body: 0;

  /* 次要正文、按钮 */
  --fs-sm: 13px;
  --lh-sm: 1.6;
  --ls-sm: 0;

  /* meta、标签 */
  --fs-xs: 12px;
  --lh-xs: 1.55;
  --ls-xs: 0;

  /* 全大写英文小标签 —— 全项目唯一允许 letter-spacing 的场景 */
  --fs-micro: 11px;
  --lh-micro: 1.5;
  --ls-micro: 0.04em;

  /* 关键数字 —— 必须配 font-variant-numeric: tabular-nums */
  --fs-num: 24px;
  --lh-num: 1.1;
  --ls-num: -0.02em;

  /* ---------------------------------------------------------------------------
     8. 字重（4 档）
     中文字重观感差异比西文大，600 即已明显偏黑，故把"强调"下移到 560。
     ------------------------------------------------------------------------ */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------------------------------------------------------------------------
     9. 间距（4px 基准，8 级）
     区块纵向 --sp-8 / --sp-10；组件内 padding --sp-3 / --sp-4；同类元素 --sp-2
     ------------------------------------------------------------------------ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 48px;
  --sp-10: 64px;

  /* ---------------------------------------------------------------------------
     10. 圆角（3 级，不多不少）
     刻意不提供 24px+ 的大圆角，避免"过度圆滑"的观感。
     ------------------------------------------------------------------------ */
  --radius-sm: 4px; /* 输入框、内联标签、chip */
  --radius-md: 8px; /* 按钮、卡片 */
  --radius-lg: 12px; /* 登录卡、模态框、浮层 */

  /* ---------------------------------------------------------------------------
     11. 阴影（2 级，微妙不浮夸）
     暗色主题下分层主要靠 border，阴影只用于真正的浮起元素。
     ------------------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.28);

  /* 按下态用的内嵌阴影：比外投影轻，用于表达"被压下去"而非"浮起来" */
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.24);

  /* ---------------------------------------------------------------------------
     12. 焦点环
     2px accent 描边 + 2px offset。键盘用户唯一的定位依据，不可省。
     ------------------------------------------------------------------------ */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--accent);

  /* ---------------------------------------------------------------------------
     13. 动效
     收敛值：即时反馈 100ms / 状态确认 150ms / 进入界面 250ms。
     严禁弹跳/回弹类过冲缓动（overshoot），只保留标准缓动。
     ------------------------------------------------------------------------ */
  --t-instant: 100ms;
  --t-fast: 150ms;
  --t-base: 250ms;
  --t-slow: 400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* ---------------------------------------------------------------------------
     14. 层级（z-index）
     语义化命名，禁止在业务代码里直接写裸 z-index 数值。
     ------------------------------------------------------------------------ */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 310;
  --z-toast: 400;
  --z-tooltip: 500;

  /* ---------------------------------------------------------------------------
     15. 布局常量
     ------------------------------------------------------------------------ */
  --content-max: 1200px;
  --topbar-height: 52px;
  --tap-min: 44px; /* 移动端最小触控目标 */
}

/* =============================================================================
   浅色主题覆盖
   暗色是默认（专业监控场景适配），浅色仅在显式声明 data-theme="light" 时启用。
   两种主题共用同一套语义 token 名，组件代码无需区分。
   ========================================================================== */
[data-theme="light"] {
  /* 2026-10-12 同步转蓝：浅色也保持蓝色基调，底色用极浅蓝而非中性灰白 */
  --surface-0: #f4f7fc;
  --surface-1: #ffffff;
  --surface-2: #eef3fb;
  --surface-3: #e3ebf7;

  --border-subtle: #dfe7f4;
  --border-default: #c8d5e9;
  --border-strong: #a8bcd9;

  --text-primary: #0d1526;
  --text-secondary: #445672;
  /* tertiary 从 #6b7688 收到 #5c6675：
     原值在浅灰底 #f7f8fa 上只有 4.32:1，低于正文 4.5 门槛（辅助文字 3:1 虽达标，
     但 tertiary 在本项目被大量用于说明性正文，按正文标准校验更稳妥）。
     门槛是「四种 surface 全过」，--surface-3 #e6e9f0 是最差底，故以此为准。
     转蓝后同步加深为 #56657d 以在浅蓝底上保持同等对比。 */
  --text-tertiary: #56657d;
  --text-disabled: #9aa8c0;

  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-muted: rgba(37, 99, 235, 0.1);
  --accent-border: rgba(37, 99, 235, 0.35);
  --accent-fg: #ffffff;

  /* ---------------------------------------------------------------------------
     语义状态（浅色）
     必须覆盖：深色版的 #34d399 / #fbbf24 / #f87171 / #60a5fa 在白底上只有
     1.6–2.8:1，连"辅助文字 ≥3:1"都达不到，直接复用等于浅色主题整体失效。
     浅色下改为同色相的深色调，且保证在四种 surface 与其 12% tint 上均 ≥4.5:1
     （实测最低 5.27，warning 4.90）。
     ------------------------------------------------------------------------ */
  --success: #065f46;
  --success-bg: rgba(6, 95, 70, 0.08);
  --success-border: rgba(6, 95, 70, 0.28);

  --warning: #92400e;
  --warning-bg: rgba(146, 64, 14, 0.08);
  --warning-border: rgba(146, 64, 14, 0.28);

  --danger: #991b1b;
  --danger-bg: rgba(153, 27, 27, 0.08);
  --danger-border: rgba(153, 27, 27, 0.3);

  --info: #1d4ed8;
  --info-bg: rgba(29, 78, 216, 0.08);
  --info-border: rgba(29, 78, 216, 0.28);

  /* ---------------------------------------------------------------------------
     阵营（浅色）
     同理覆盖，保持红蓝对抗的高辨识度，且在浅底上仍是纯色而非发灰。
     side-blue 刻意比 accent 深一档（accent 是主操作蓝），避免阵营蓝与操作蓝混淆。
     ------------------------------------------------------------------------ */
  --side-red: #9f1239;
  --side-red-bg: rgba(159, 18, 57, 0.08);
  --side-red-border: rgba(159, 18, 57, 0.3);

  --side-blue: #1e40af;
  --side-blue-bg: rgba(30, 64, 175, 0.08);
  --side-blue-border: rgba(30, 64, 175, 0.3);

  --shadow-sm: 0 1px 2px rgba(13, 21, 38, 0.06);
  --shadow-md: 0 4px 16px rgba(13, 21, 38, 0.1);
}