/* ============================================================================
 * 墨核 AI · 主题：科技蓝 · 控台风（theme-tech）
 *
 * 定位：深空底 + 青蓝光晕 + 网格背景。信息密度高，像运维控制台。
 * 适用：长时间盯数据的运营/管理员。
 *
 * 【实现方式】只覆盖 tokens.css 里的**基础变量**，不动任何组件样式。
 *   组件全部走 var(--xxx)，所以这里改一处，全站自动生效。
 *   别名层（--ink/--ink2/--card/--bd…）在 tokens.css 里是 `var(--基础名)`，
 *   会跟着一起变，本文件无需重复定义 —— 重复定义反而会在以后的
 *   令牌调整里变成两份真相（这是本项目明令禁止的模式）。
 *
 * 【P0 红线遵守】
 *   - 无紫→粉渐变（本主题主色是青→蓝，同色系推进）
 *   - 圆角不超 18px（不改动 radius，沿用令牌）
 *   - 所有前景/背景对比度按 tokens.css 同一套标准（见每行的比值注释）
 * ========================================================================== */

/* 首屏防闪烁：主题名在 <html data-theme> 上，由 theme.js 在 head 内联阶段写入 */
[data-theme="tech"] {
  /* ===== Surface：比默认更冷、更深，拉开控制台的纵深感 ===== */
  --bg:            #060B14;   /* 深空底（比默认 #0A0E15 更暗一档） */
  --surface:       #0D1523;   /* 面板 */
  --surface-2:     #142033;   /* 三级面 */

  /* ===== Foreground ===== */
  --fg:            #E6EFFB;   /* 对 --bg 17.2:1 (AAA) */
  --fg-2:          #BFCDE2;
  --muted:         #8FA3BE;   /* 对 --bg 7.4:1 (AAA) */
  --meta:          #7387A3;   /* 对 --bg 5.33:1 / surface 4.98:1 / surface-2 4.41:1（过 AA） */

  /* ===== Border：偏冷的蓝灰 ===== */
  --border:        #1E2C42;
  --border-soft:   rgba(140, 170, 210, .08);

  /* ===== Accent：电光青蓝（原 --accent 是纯青，这里往蓝推一档） ===== */
  --accent:        #38BDF8;   /* 天青：对 --bg 9.2:1 */
  --accent-strong: #0EA5E9;   /* 实蓝：实心按钮底 */
  --accent-hover:  #7DD3FC;
  --accent-active: #0284C7;
  --accent-dim:    rgba(56, 189, 248, .13);
  --on-accent:     #041C2C;   /* 实蓝底上的深墨字 — 7.1:1 */
  /* 动效令牌：与 css/tokens.css 同值。theme-tech.css 里 L98 的 transition 引用了它们，
     不补则切到本主题时 transition 声明整条失效（无动画，且是隐性失效不报错）。 */
  --motion-base:   200ms;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);

  /* ===== 状态色：整体往冷调统一，避免暖色在冷底上跳 ===== */
  --success:       #2DD4BF;
  --success-dim:   rgba(45, 212, 191, .12);
  --warn:          #FBBF24;
  --warn-dim:      rgba(251, 191, 36, .08);
  --danger:        #F87171;
  --danger-dim:    rgba(248, 113, 113, .12);
  --info:          #60A5FA;
  --info-dim:      rgba(96, 165, 250, .14);

  /* ===== 金色档位微调：冷底上略提亮，保持「贵」的观感 ===== */
  --gold:          #FCD34D;
  --gold-deep:     #D9A521;
  --on-gold:       #2A1D04;
  --gold-dim:      rgba(252, 211, 77, .12);

  /* ===== 渐变：青 → 蓝（同色系，非紫粉） ===== */
  --grad:          linear-gradient(135deg, #0EA5E9 0%, #2DD4BF 100%);

  /* ===== 焦点环：跟随强调色 ===== */
  --focus-ring:    0 0 0 3px rgba(56, 189, 248, .35);

  /* ===== 阴影：冷底用蓝调阴影，比纯黑更自然 ===== */
  --elev-raised:   0 8px 24px rgba(2, 8, 20, .58);
  --elev-overlay:  0 24px 64px rgba(2, 8, 20, .72);
}

/* ---- 科技风的标志性装饰：网格背景 + 顶部光晕 ----
   用伪元素而不是背景图（零请求、零 CDN 依赖，符合本项目「无构建」约束）。
   ⛔ 只在 body 上挂一层，不用 position:fixed 全屏遮罩 —— 那会吃掉
      pointer-events 并把 z-index 层级搞得很难收拾（本项目踩过这个坑）。 */
[data-theme="tech"] body {
  background-image:
    /* 顶部青蓝光晕 */
    radial-gradient(900px 420px at 50% -8%, rgba(56, 189, 248, .10), transparent 70%),
    /* 细网格：24px 一格，透明度极低，只在纯色底上隐约可见 */
    linear-gradient(rgba(56, 189, 248, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, .035) 1px, transparent 1px);
  background-size: 100% 100%, 24px 24px, 24px 24px;
  background-attachment: fixed;
}

/* 卡片：科技风给一层极淡的内发光边框，替代纯色描边 */
[data-theme="tech"] .card,
[data-theme="tech"] .pane {
  box-shadow: inset 0 1px 0 rgba(56, 189, 248, .07), var(--elev-raised);
}

/* 主按钮：青蓝流光（用 background-position 动效，不做渐变旋转 —— 旋转会触发重绘） */
[data-theme="tech"] .btn.accent,
[data-theme="tech"] .btn.primary {
  background: linear-gradient(120deg, #0EA5E9 0%, #38BDF8 45%, #2DD4BF 100%);
  background-size: 160% 100%;
  color: var(--on-accent);
  transition: background-position var(--motion-base) var(--ease-out);
}
[data-theme="tech"] .btn.accent:hover,
[data-theme="tech"] .btn.primary:hover {
  background-position: 100% 0;
}

/* 危险按钮（停止收款 / 确认清除）：此前全站无定义 → 白字无背景。
   底色用本主题 --danger，字色用深墨保证对比度（tech 的 #F87171 上白字仅 2.4:1）。 */
[data-theme="tech"] .btn.danger {
  background: var(--danger);
  color: #2A0B0B;
  box-shadow: 0 6px 18px rgba(248, 113, 113, .28);
}
[data-theme="tech"] .btn.danger:hover { filter: brightness(1.08); }

/* 顶部导航：给一条发光分隔线 */
[data-theme="tech"] .tabs,
[data-theme="tech"] .topbar {
  border-bottom-color: rgba(56, 189, 248, .18);
  box-shadow: 0 1px 0 rgba(56, 189, 248, .06);
}