/* =========================================================
   tokens.css — 全站设计令牌（唯一真源）
   2026-10-27 建立 · 2026-10-27 升级为「Quantum Lab 科幻风」

   设计方向：深太空蓝（#0a0e1a）画布 + 霓虹青（#00f0ff）主强调 +
            电光紫（#b24bff）次强调 + 琥珀（#ffb800）状态色。
            玻璃拟态卡片 + 发光边框 + 网格扫描线氛围。
   ========================================================= */

:root {
  /* ---------- 0. 色板：Quantum Lab 科幻主题 ---------- */

  /* 画布（4 阶深空：从最外到最内逐层变亮） */
  --t-bg:            #0a0e1a;   /* 页面最外层画布 */
  --t-bg-2:          #0f1525;   /* 次级画布：侧栏背景、抽屉底 */
  --t-bg-3:          #161d32;   /* 凹槽区：输入框底、选中态底 */
  --t-bg-4:          #1e2640;   /* 最深卡片、弹出层底 */

  /* 卡片：玻璃拟态（半透明 + backdrop-blur 由页面各自决定） */
  --t-surface:       #141a2e;   /* 卡片主底 */
  --t-surface-2:     #1a2138;   /* 次级表面：表头、分区 */
  --t-surface-3:     #222c48;   /* 悬浮/激活态 */

  /* 文字 3 级 */
  --t-ink:           #e6ebff;   /* 主文字 */
  --t-ink-2:         #8899bb;   /* 次文字 */
  --t-ink-3:         #566082;   /* 弱文字 / 占位 / 禁用 */

  /* 边框 3 级 + 发光边框 */
  --t-line:          #242e4a;   /* 细分割线 */
  --t-line-2:        #2f3c5e;   /* 卡片常规边框 */
  --t-line-3:        #3e4d76;   /* 悬浮/聚焦边框 */
  --t-line-glow:     rgba(0, 240, 255, 0.45);  /* 霓虹发光边框（聚焦/激活） */

  /* 主强调色：霓虹青 */
  --t-accent:        #00f0ff;
  --t-accent-strong: #00c4d6;   /* hover / 按下 */
  --t-accent-soft:   rgba(0, 240, 255, 0.12);  /* 淡浸染底 */
  --t-accent-line:   rgba(0, 240, 255, 0.35);  /* 淡浸染边 */
  --t-accent-glow:   0 0 14px rgba(0, 240, 255, 0.55), 0 0 32px rgba(0, 240, 255, 0.25);

  /* 次强调：电光紫（用于链接、次 CTA、数字高亮） */
  --t-accent-2:        #b24bff;
  --t-accent-2-soft:   rgba(178, 75, 255, 0.12);
  --t-accent-2-glow:   0 0 14px rgba(178, 75, 255, 0.5);

  /* 语义色（状态用，不用于装饰） */
  --t-warn:          #ffb800;
  --t-warn-soft:     rgba(255, 184, 0, 0.12);
  --t-danger:        #ff4757;
  --t-danger-soft:   rgba(255, 71, 87, 0.12);
  --t-info:          #5b8fff;
  --t-info-soft:     rgba(91, 143, 255, 0.12);
  --t-success:       #00f0a3;
  --t-success-soft:  rgba(0, 240, 163, 0.12);

  /* ---------- 1. 字体 ---------- */
  /* 显示字体（标题/品牌）：Orbitron — 经典未来感 */
  --t-font-display: 'Orbitron', 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* 正文字体：Rajdhani — 轻盈的无衬线，保持科技感但不那么重 */
  --t-font: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
            "Hiragino Sans GB", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
  /* 等宽：JetBrains Mono — 现代程序员字体，适合时间戳/镜号/数据 */
  --t-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, Consolas, monospace;

  /* 字号：8 级阶梯（科幻风整体偏大一号，加强视觉冲击力） */
  --t-fs-display: 32px;   /* 页面主标题 */
  --t-fs-h1:      22px;   /* 区块标题 */
  --t-fs-h2:      18px;   /* 卡片标题 */
  --t-fs-lg:      15px;   /* 强调正文 / 大号按钮 */
  --t-fs-body:    14px;   /* 正文（主力） */
  --t-fs-sm:      12.5px; /* 次要说明（主力） */
  --t-fs-xs:      11.5px; /* 元信息 / 标签 */
  --t-fs-2xs:     10.5px; /* 最小：分区标题、角标 */

  /* 行高 */
  --t-lh-tight: 1.35;
  --t-lh:       1.6;
  --t-lh-loose: 1.75;

  /* 字重 */
  --t-fw-normal: 400;
  --t-fw-mid:    500;
  --t-fw-semi:   600;
  --t-fw-bold:   700;

  /* ---------- 2. 圆角：4 级（科幻风更锐利，从 14→12） ---------- */
  --t-r-card: 12px;
  --t-r-ctrl: 8px;
  --t-r-sm:   6px;
  --t-r-pill: 999px;

  /* ---------- 3. 阴影：3 级 + 发光阴影 ---------- */
  --t-sh1: 0 1px 3px rgba(0, 0, 0, 0.4);
  --t-sh2: 0 4px 16px rgba(0, 0, 0, 0.35);
  --t-sh3: 0 10px 32px rgba(0, 0, 0, 0.45);
  /* 霓虹发光阴影（卡片悬浮态 / CTA） */
  --t-glow-cyan:   0 0 20px rgba(0, 240, 255, 0.35), 0 0 48px rgba(0, 240, 255, 0.15);
  --t-glow-purple: 0 0 20px rgba(178, 75, 255, 0.35), 0 0 48px rgba(178, 75, 255, 0.15);

  /* ---------- 4. 间距 ---------- */
  --t-sp-1: 4px;
  --t-sp-2: 8px;
  --t-sp-3: 12px;
  --t-sp-4: 16px;
  --t-sp-5: 20px;
  --t-sp-6: 24px;
  --t-sp-8: 32px;

  /* ---------- 5. 控件规格 ---------- */
  --t-btn-h-lg: 44px;
  --t-btn-h:    36px;
  --t-btn-h-sm: 30px;
  --t-ctrl-h:   36px;
}

/* =========================================================
   6. 全局氛围层（网格 + 扫描线 + 噪点）—— 由 base.html 注入
   ========================================================= */

/* =========================================================
   7. 基础类（渐进采用，新写样式用这些）
   ========================================================= */

/* --- 按钮：4 类 × 3 档 --- */
.t-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--t-btn-h); padding: 0 16px;
  font-family: var(--t-font); font-size: var(--t-fs-body); font-weight: var(--t-fw-semi);
  letter-spacing: 0.04em;
  line-height: 1; white-space: nowrap;
  border-radius: var(--t-r-ctrl); border: 1px solid transparent;
  cursor: pointer; user-select: none;
  transition: all .2s cubic-bezier(.4,0,.2,1);
}
.t-btn:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.3); }

/* 主按钮：霓虹青渐变 + 发光 hover（一屏只允许一个） */
.t-btn--primary {
  background: linear-gradient(135deg, #00d4e8 0%, #00a8ff 100%);
  border-color: rgba(0, 240, 255, 0.5);
  color: #041220;
  font-weight: var(--t-fw-bold);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}
.t-btn--primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #00f0ff 0%, #00c4d6 100%);
  box-shadow: var(--t-glow-cyan);
  transform: translateY(-1px);
}

/* 次按钮：深底 + 霓虹边 */
.t-btn--secondary {
  background: var(--t-surface); border-color: var(--t-line-2); color: var(--t-ink);
}
.t-btn--secondary:hover:not(:disabled) {
  border-color: var(--t-accent); color: var(--t-accent);
  box-shadow: var(--t-accent-glow);
}

/* 幽灵按钮：无边框 */
.t-btn--ghost { background: transparent; border-color: transparent; color: var(--t-ink-2); }
.t-btn--ghost:hover:not(:disabled) { background: var(--t-accent-soft); color: var(--t-accent); }

/* 危险按钮 */
.t-btn--danger { background: var(--t-danger-soft); border-color: rgba(255, 71, 87, 0.4); color: var(--t-danger); }
.t-btn--danger:hover:not(:disabled) { border-color: var(--t-danger); box-shadow: 0 0 14px rgba(255,71,87,0.3); }

/* 尺寸 */
.t-btn--lg { height: var(--t-btn-h-lg); padding: 0 22px; font-size: var(--t-fs-lg); }
.t-btn--sm { height: var(--t-btn-h-sm); padding: 0 12px; font-size: var(--t-fs-sm); border-radius: var(--t-r-sm); }

/* --- 卡片：玻璃拟态 + 霓虹边框 hover --- */
.t-card {
  background: var(--t-surface);
  border: 1px solid var(--t-line-2);
  border-radius: var(--t-r-card);
  box-shadow: var(--t-sh2);
  transition: border-color .2s, box-shadow .2s;
}
.t-card:hover {
  border-color: var(--t-accent-line);
  box-shadow: var(--t-sh3), var(--t-glow-cyan);
}

/* --- 标签：胶囊 --- */
.t-tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 10px;
  font-family: var(--t-font);
  font-size: var(--t-fs-xs); font-weight: var(--t-fw-semi);
  letter-spacing: 0.05em;
  line-height: 1;
  border-radius: var(--t-r-pill);
  background: var(--t-surface-2); color: var(--t-ink-2); border: 1px solid var(--t-line);
}
.t-tag--accent {
  background: var(--t-accent-soft); color: var(--t-accent);
  border-color: var(--t-accent-line);
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.35);
}

/* --- 输入框：深空底 + 霓虹聚焦环 --- */
.t-input {
  width: 100%; box-sizing: border-box;
  background: var(--t-bg-3); border: 1px solid var(--t-line-2);
  border-radius: var(--t-r-ctrl); padding: 9px 13px;
  color: var(--t-ink); font-family: var(--t-font); font-size: var(--t-fs-body);
  transition: border-color .18s, box-shadow .18s;
}
.t-input:focus {
  outline: none; border-color: var(--t-accent);
  box-shadow: 0 0 0 3px var(--t-accent-soft), var(--t-accent-glow);
}
.t-input::placeholder { color: var(--t-ink-3); }