/* =========================================================================
 * 全局设计令牌 — 深色单主题 · 五级高度阶梯 (Single Dark Theme · Elevation Ramp)
 * -------------------------------------------------------------------------
 * 【为什么改成深色单主题】
 *   本平台深色是唯一实际生效主题（theme.js 首访即强制深色，切换按钮已移除）。
 *   历史 :root 是浅色优先，导致三处不一致：
 *     1) theme.js 执行前有一帧浅色闪白；
 *     2) 未被 body.theme-dark 覆盖的元素回落到浅色令牌；
 *     3) components.css 深色优先 + 23 种硬编码近黑背景，与令牌互不对齐。
 *   现统一为：:root 即深色真值，所有层级只从五级高度阶梯取色。
 *
 * 【五级高度阶梯 · 唯一背景来源】
 *   --bg-sunken   最深（表格/甘特区/内嵌大屏底）
 *   --bg-base     页面底
 *   --bg-surface  卡片/面板
 *   --bg-raised   悬浮/激活/输入框
 *   --bg-overlay  弹窗/浮层/下拉
 *   任何新增背景必须从这五级取，不得再引入新的近黑色值。
 *
 * 【扁平化铁律】
 *   1. 严禁内发光 box-shadow: ... inset
 *   2. 严禁霓虹光晕 0 0 Npx（无偏移彩色扩散）
 *   3. 严禁彩色粗左边框，状态一律「6px 圆点 + 文字」
 *   4. 严禁卡片纵向渐变
 *   5. 唯一强调色：天青 #38bdf8
 * ========================================================================= */

@import '/common/tokens.css';

:root, .theme-dark {
  /* ===== 五级高度阶梯（纯中性，与 tokens.css 严格一致） ===== */
  --bg-sunken:  #080b11;
  --bg-base:    #0a0d13;
  --bg-surface: #11151b;
  --bg-raised:  #161b22;
  --bg-overlay: #1b212a;

  /* ===== 历史变量名 → 阶梯别名 ===== */
  --bg: var(--bg-base);
  --bg-alt: var(--bg-surface);
  --panel: var(--bg-surface);
  --panel-alt: var(--bg-raised);
  --panel-raised: var(--bg-raised);
  --panel-hover: var(--bg-overlay);
  --surface: var(--bg-surface);
  --surface-2: var(--bg-raised);
  --card-bg: var(--bg-surface);

  /* ===== 描边 ===== */
  --border: rgba(148, 163, 184, 0.12);
  --border-light: rgba(148, 163, 184, 0.08);
  --border-neutral: rgba(148, 163, 184, 0.12);
  --border-hover: rgba(148, 163, 184, 0.22);
  --border-strong: rgba(148, 163, 184, 0.26);
  --border-focus: rgba(56, 189, 248, 0.45);

  /* ===== 主色 天青 ===== */
  --primary: #38bdf8;
  --primary-hover: #7dd3fc;
  --primary-active: #0ea5e9;
  --primary-bg: rgba(56, 189, 248, 0.10);
  --primary-dim: rgba(56, 189, 248, 0.12);
  --primary-flat: #38bdf8;

  /* ===== 语义色 ===== */
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #f87171;
  --green: #34d399;
  --green-bg: rgba(52, 211, 153, 0.12);
  --amber: #fbbf24;
  --amber-bg: rgba(251, 191, 36, 0.12);
  --red: #f87171;
  --red-bg: rgba(248, 113, 113, 0.12);
  --cyan: #22d3ee;
  --cyan-bg: rgba(34, 211, 238, 0.12);
  --purple: #c084fc;
  --purple-bg: rgba(192, 132, 252, 0.12);

  --status-sage: #34d399;
  --status-amber: #fbbf24;
  --status-coral: #f87171;

  /* ===== 文字层级 ===== */
  --text: #f8fafc;
  --text-muted: #cbd5e1;
  --text-dim: #94a3b8;
  --text-faint: #7c8ba1;
  --text-1: #f8fafc;
  --text-2: #cbd5e1;
  --text-3: #94a3b8;

  /* ===== 阴影 ===== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.45);
  --shadow-flat-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-flat-md: 0 4px 12px rgba(0, 0, 0, 0.35);

  /* ===== 侧边栏 ===== */
  --sidebar-bg: #070a10;
  --sidebar-border: rgba(148, 163, 184, 0.08);
  --sidebar-text: #94a3b8;
  --sidebar-text-hover: #f8fafc;
  --sidebar-item-hover: rgba(148, 163, 184, 0.08);
  --sidebar-active-bg: rgba(56, 189, 248, 0.12);
  --sidebar-active-text: #38bdf8;

  --brand: #38bdf8;
  --brand-hover: #7dd3fc;
  --brand-active: #0ea5e9;
  --brand-light: rgba(56, 189, 248, 0.10);
  --brand-soft: rgba(56, 189, 248, 0.14);

  /* 共享变量 */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 32px;
  --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 8px; --radius-xl: 8px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  color-scheme: dark;
}

.theme-light {
  /* ===== 五级高度阶梯（浅色适配） ===== */
  --bg-sunken: #f1f5f9;
  --bg-base: #f8fafc;
  --bg-surface: #ffffff;
  --bg-raised: #ffffff;
  --bg-overlay: #ffffff;

  /* ===== 别名对齐 ===== */
  --bg: var(--bg-base);
  --bg-alt: var(--bg-surface);
  --panel: var(--bg-surface);
  --panel-alt: #f1f5f9;
  --panel-raised: #f1f5f9;
  --panel-hover: #f1f5f9;
  --surface: var(--bg-surface);
  --surface-2: #f1f5f9;
  --card-bg: var(--bg-surface);

  /* ===== 描边 (浅色下加深对比度) ===== */
  --border: rgba(148, 163, 184, 0.22);
  --border-light: rgba(148, 163, 184, 0.14);
  --border-neutral: rgba(148, 163, 184, 0.22);
  --border-hover: rgba(148, 163, 184, 0.35);
  --border-strong: rgba(148, 163, 184, 0.45);
  --border-focus: rgba(2, 132, 199, 0.45);

  /* ===== 主色适配 (浅色模式下蓝天青更稳重) ===== */
  --primary: #0284c7;
  --primary-hover: #0369a1;
  --primary-active: #075985;
  --primary-bg: rgba(2, 132, 199, 0.06);
  --primary-dim: rgba(2, 132, 199, 0.10);
  --primary-flat: #0284c7;

  /* ===== 语义色 (浅色适配) ===== */
  --ok: #059669;
  --warn: #d97706;
  --danger: #dc2626;
  --green: #059669;
  --green-bg: rgba(5, 150, 105, 0.08);
  --amber: #d97706;
  --amber-bg: rgba(217, 119, 6, 0.08);
  --red: #dc2626;
  --red-bg: rgba(220, 38, 38, 0.08);
  --cyan: #0891b2;
  --cyan-bg: rgba(8, 145, 178, 0.08);
  --purple: #9333ea;
  --purple-bg: rgba(147, 51, 234, 0.08);

  --status-sage: #059669;
  --status-amber: #d97706;
  --status-coral: #dc2626;

  /* ===== 文字层级 (深色字) ===== */
  --text: #0f172a;
  --text-muted: #334155;
  --text-dim: #64748b;
  --text-faint: #94a3b8;
  --text-1: #0f172a;
  --text-2: #334155;
  --text-3: #64748b;

  /* ===== 阴影 (浅色适配) ===== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.08);
  --shadow-flat-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-flat-md: 0 4px 12px rgba(0, 0, 0, 0.06);

  /* ===== 侧边栏适配 ===== */
  --sidebar-bg: #ffffff;
  --sidebar-border: rgba(148, 163, 184, 0.12);
  --sidebar-text: #64748b;
  --sidebar-text-hover: #0f172a;
  --sidebar-item-hover: #f1f5f9;
  --sidebar-active-bg: rgba(2, 132, 199, 0.08);
  --sidebar-active-text: #0284c7;

  --brand: #0284c7;
  --brand-hover: #0369a1;
  --brand-active: #075985;
  --brand-light: rgba(2, 132, 199, 0.06);
  --brand-soft: rgba(2, 132, 199, 0.10);

  color-scheme: light;
}
/* 恢复双主题模式 */
html.theme-dark, body.theme-dark {
  color-scheme: dark;
}
html.theme-light, body.theme-light {
  color-scheme: light;
}
/* ============ 核心全局重置与底色 ============ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  min-height: 100%;
  width: 100%;
  background: var(--bg-base) !important;
  color: var(--text) !important;
  font-family: var(--font-display) !important;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--primary); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--primary-hover); }
.mono, .num, .tabular { font-family: var(--font-mono) !important; font-variant-numeric: tabular-nums; }

/* 细滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.20); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.34); }

/* 侧栏滚动条更收敛 */
.sidebar nav::-webkit-scrollbar { width: 6px; }
.sidebar nav::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.14); }

/* 键盘可达性：统一焦点环（1px 实线，非霓虹） */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}

/* ============ 四角 HUD 标线（属设计语言，保留） ============ */
.hud-corner-box { position: relative; }
.hud-corner-box::before,
.hud-corner-box::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-color: var(--primary);
  opacity: 0.55;
  pointer-events: none;
  z-index: 2;
}
.hud-corner-box::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.hud-corner-box::after { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; }