/* ═══════════════════════════════════════════════════════
 * manager-tokens.css
 * Manager 设计意图 → Hub 实色值映射层
 *
 * 用途：将 Manager UI 的视觉意图（渐变、色值、间距）
 *       映射为 Hub 可用的实色变量，避免依赖 Hub 的
 *       半透明变量 --vb-surface (90% opacity) 等。
 *
 * 规则：所有从 Manager 移植的 UI 组件必须用 --mg-* 变量
 *       严禁直接引用 --vb-* 系列（它们是半透明的）
 * ═══════════════════════════════════════════════════════ */

/* ═══ 亮色模式 ═══ */
:root {
  /* --- Hero 顶栏区域 (与 Manager hero 100% 视觉一致) --- */
  --mg-hero-gradient: linear-gradient(135deg, #312e81 0%, #5b21b6 45%, #7c3aed 100%);
  --mg-hero-title: #ffffff;
  --mg-hero-sub: #c4b5fd;
  --mg-hero-btn-bg: rgba(255,255,255,0.15);
  --mg-hero-btn-text: #ffffff;
  --mg-hero-btn-border: rgba(255,255,255,0.2);
  --mg-hero-btn-hover-bg: rgba(255,255,255,0.25);
  --mg-hero-chip-bg: rgba(255,255,255,0.12);
  --mg-hero-chip-text: #e0e7ff;
  --mg-hero-chip-border: rgba(255,255,255,0.18);

  /* --- 中性面板 (替代 Manager 的半透明 --vb-surface) --- */
  --mg-card-bg: #ffffff;
  --mg-section-bg: #f8fafc;
  --mg-toolbar-bg: rgba(248,250,252,0.96);
  --mg-toolbar-border: rgba(15,23,42,0.08);

  /* --- 交互元素 (维持 Hub 现有靛蓝品牌调性) --- */
  --mg-accent: #4f46e5;
  --mg-accent-hover: #4338ca;
  --mg-accent-light: rgba(79,70,229,0.08);
  --mg-btn-primary-bg: #4f46e5;
  --mg-btn-primary-text: #ffffff;
  --mg-btn-primary-hover-bg: #4338ca;
  --mg-btn-secondary-bg: #f1f5f9;
  --mg-btn-secondary-text: #0f172a;
  --mg-btn-secondary-border: rgba(15,23,42,0.10);

  /* --- 状态色 (与 Manager/Extension 语义对齐) --- */
  --mg-success-bg: rgba(34,197,94,0.14);
  --mg-success-bd: rgba(34,197,94,0.28);
  --mg-success-fg: #166534;
  --mg-warning-bg: rgba(245,158,11,0.16);
  --mg-warning-bd: rgba(245,158,11,0.30);
  --mg-warning-fg: #92400e;
  --mg-danger-bg: rgba(239,68,68,0.14);
  --mg-danger-bd: rgba(239,68,68,0.28);
  --mg-danger-fg: #991b1b;

  /* --- 文字 (实色，不透明) --- */
  --mg-text-primary: #0f172a;
  --mg-text-secondary: rgba(15,23,42,0.62);
  --mg-text-muted: rgba(15,23,42,0.45);
  --mg-text-inverse: #ffffff;

  /* --- 边框与阴影 --- */
  --mg-border-light: rgba(15,23,42,0.08);
  --mg-border: rgba(15,23,42,0.12);
  --mg-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --mg-shadow-md: 0 6px 20px rgba(0,0,0,0.08);
  --mg-shadow-lg: 0 12px 40px rgba(0,0,0,0.12);

  /* --- 圆角 --- */
  --mg-radius-btn: 10px;
  --mg-radius-card: 16px;
  --mg-radius-input: 12px;
  --mg-radius-pill: 999px;
}

/* ═══ 暗色模式 ═══ */
[data-theme="dark"] {
  /* Hero 暗色保持不变 (hero 本来就是深紫) */
  --mg-hero-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 45%, #4c1d95 100%);
  --mg-hero-title: #f5f3ff;
  --mg-hero-sub: #a78bfa;
  --mg-hero-btn-bg: rgba(255,255,255,0.10);
  --mg-hero-btn-text: #e0e7ff;
  --mg-hero-btn-border: rgba(255,255,255,0.12);
  --mg-hero-btn-hover-bg: rgba(255,255,255,0.18);
  --mg-hero-chip-bg: rgba(255,255,255,0.08);
  --mg-hero-chip-text: #c4b5fd;
  --mg-hero-chip-border: rgba(255,255,255,0.10);

  /* 中性面板 */
  --mg-card-bg: #1e1b2e;
  --mg-section-bg: #17142a;
  --mg-toolbar-bg: rgba(26,20,48,0.96);
  --mg-toolbar-border: rgba(255,255,255,0.06);

  /* 交互元素 */
  --mg-accent: #6366f1;
  --mg-accent-hover: #818cf8;
  --mg-accent-light: rgba(99,102,241,0.12);
  --mg-btn-primary-bg: #6366f1;
  --mg-btn-primary-text: #ffffff;
  --mg-btn-primary-hover-bg: #4f46e5;
  --mg-btn-secondary-bg: rgba(255,255,255,0.06);
  --mg-btn-secondary-text: #e2e8f0;
  --mg-btn-secondary-border: rgba(255,255,255,0.10);

  /* 状态色 */
  --mg-success-bg: rgba(34,197,94,0.12);
  --mg-success-bd: rgba(34,197,94,0.22);
  --mg-success-fg: #4ade80;
  --mg-warning-bg: rgba(245,158,11,0.14);
  --mg-warning-bd: rgba(245,158,11,0.24);
  --mg-warning-fg: #fbbf24;
  --mg-danger-bg: rgba(239,68,68,0.12);
  --mg-danger-bd: rgba(239,68,68,0.22);
  --mg-danger-fg: #f87171;

  /* 文字 */
  --mg-text-primary: #e2e8f0;
  --mg-text-secondary: rgba(226,232,240,0.55);
  --mg-text-muted: rgba(226,232,240,0.40);
  --mg-text-inverse: #0f172a;

  /* 边框与阴影 */
  --mg-border-light: rgba(255,255,255,0.06);
  --mg-border: rgba(255,255,255,0.10);
  --mg-shadow-sm: 0 1px 3px rgba(0,0,0,0.20);
  --mg-shadow-md: 0 6px 20px rgba(0,0,0,0.25);
  --mg-shadow-lg: 0 12px 40px rgba(0,0,0,0.35);
}