/* ============================================================================
 *  TRIFRAME · 设计令牌
 *  方向：暗房（Darkroom）—— 深墨底 + 琥珀安全灯，等宽读数，发丝边框，颗粒质感
 *  展示字：Chakra Petch（技术感） / 等宽：JetBrains Mono（尺寸、参数读数）
 *  中文正文：思源黑体系 / 苹方 / 微软雅黑（内敛，不与展示字抢戏）
 * ==========================================================================*/

:root {
  /* ---- 字族 ---- */
  --font-display: "Chakra Petch", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "Chakra Petch", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* ---- 字阶（1.25 模块化） ---- */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --fs-3xl: 40px;

  /* ---- 间距梯度 ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;

  /* ---- 圆角 ---- */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 12px;
  --r-xl: 20px;

  /* ---- 动效 ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;

  --panel-w: 408px;
  --header-h: 60px;
}

/* ============ 暗色（默认） ============ */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0c10;
  --bg-2: #0d1117;
  --surface: #12171f;
  --surface-2: #1a212b;
  --surface-3: #232c38;
  --line: rgba(233, 238, 246, 0.10);
  --line-strong: rgba(233, 238, 246, 0.20);
  --text: #e9eef6;
  --text-dim: #9aa7b8;
  --text-mute: #6b7889;
  --accent: #f5a524;
  --accent-2: #ffd166;
  --accent-ink: #14100a;
  --accent-soft: rgba(245, 165, 36, 0.14);
  --ok: #4ade80;
  --info: #38bdf8;
  --warn: #fbbf24;
  --danger: #f87171;
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.48);
  --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.56);
  --grain-opacity: 0.05;
  --stage-grid: rgba(233, 238, 246, 0.045);

  /* Element Plus 主题对齐 */
  --el-color-primary: #f5a524;
  --el-color-primary-light-3: #f7b957;
  --el-color-primary-light-5: #f2a01c;
  --el-color-primary-light-7: #cf8410;
  --el-color-primary-light-8: #b3730e;
  --el-color-primary-light-9: #6b4408;
  --el-color-primary-dark-2: #c7841d;
  --el-bg-color: #12171f;
  --el-bg-color-page: #0a0c10;
  --el-bg-color-overlay: #1a212b;
  --el-text-color-primary: #e9eef6;
  --el-text-color-regular: #cbd4e0;
  --el-text-color-secondary: #9aa7b8;
  --el-text-color-placeholder: #6b7889;
  --el-border-color: rgba(233, 238, 246, 0.14);
  --el-border-color-light: rgba(233, 238, 246, 0.10);
  --el-border-color-lighter: rgba(233, 238, 246, 0.08);
  --el-fill-color: #1a212b;
  --el-fill-color-light: #232c38;
  --el-fill-color-lighter: #1a212b;
  --el-fill-color-blank: #12171f;
}

/* ============ 亮色（冷调浅灰 + 湛蓝强调） ============ */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fa;
  --bg-2: #eceff5;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #edf1f7;
  --line: rgba(16, 23, 40, 0.10);
  --line-strong: rgba(16, 23, 40, 0.20);
  --text: #101728;
  --text-dim: #46536b;
  --text-mute: #7c889c;
  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --accent-ink: #ffffff;
  --accent-soft: rgba(37, 99, 235, 0.10);
  --ok: #16a34a;
  --info: #0ea5e9;
  --warn: #d97706;
  --danger: #dc2626;
  --shadow-1: 0 2px 8px rgba(16, 24, 40, 0.08);
  --shadow-2: 0 8px 28px rgba(16, 24, 40, 0.10);
  --shadow-3: 0 24px 64px rgba(16, 24, 40, 0.14);
  --grain-opacity: 0.03;
  --stage-grid: rgba(16, 24, 40, 0.05);

  /* Element Plus 主题对齐 */
  --el-color-primary: #2563eb;
  --el-color-primary-light-3: #6692f1;
  --el-color-primary-light-5: #92b1f5;
  --el-color-primary-light-7: #b7c9f8;
  --el-color-primary-light-8: #cfdcf9;
  --el-color-primary-light-9: #e7edfc;
  --el-color-primary-dark-2: #1e4fbc;
  --el-color-danger: #dc2626;
  --el-color-error: #dc2626;
  --el-color-warning: #d97706;
  --el-color-success: #16a34a;
  --el-bg-color: #ffffff;
  --el-bg-color-page: #f4f6fa;
  --el-bg-color-overlay: #ffffff;
  --el-text-color-primary: #101728;
  --el-text-color-regular: #333d52;
  --el-text-color-secondary: #46536b;
  --el-text-color-placeholder: #7c889c;
  --el-border-color: rgba(16, 23, 40, 0.16);
  --el-border-color-light: rgba(16, 23, 40, 0.12);
  --el-border-color-lighter: rgba(16, 23, 40, 0.08);
  --el-fill-color: #f7f9fc;
  --el-fill-color-light: #edf1f7;
  --el-fill-color-lighter: #f7f9fc;
  --el-fill-color-blank: #ffffff;
}