/* ============================================================
   人生驾驶舱 · 统一设计系统 Design Tokens (v1.0)
   供 life-cockpit 工作台 4 大模块（阅读/工作/生活/学习）共用
   目录：D:\WB-Obsidian\life-cockpit\public\design-tokens.css
   ============================================================ */

:root {
  /* ===== 品牌主色 ===== */
  --primary: #1a56db;
  --primary-dark: #0f2b5c;
  --primary-light: #e8effc;
  --primary-50: #f4f7ff;

  /* ===== 四大模块色（身份识别） ===== */
  --module-reading: #534AB7;   /* 阅读 · 紫   */
  --module-reading-bg: #EEEDFE;
  --module-work: #185FA5;      /* 工作 · 蓝   */
  --module-work-bg: #E6F1FB;
  --module-life: #BA7517;      /* 生活 · 暖橙 */
  --module-life-bg: #FAEEDA;
  --module-study: #0F6E56;     /* 学习 · 青绿 */
  --module-study-bg: #E1F5EE;

  /* ===== 语义色 ===== */
  --success: #059669;  --success-bg: #e6f4ea;
  --warning: #d97706;  --warning-bg: #fff8e1;
  --danger:  #dc2626;  --danger-bg:  #fce8e6;
  --info:    #1a56db;  --info-bg:    #e8effc;

  /* ===== 中性色（浅色主题） ===== */
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #1f2937;
  --text-2: #6b7280;
  --text-3: #9ca3af;

  /* ===== 深色（Header / 侧栏 / 沉浸阅读区） ===== */
  --dark-bg: #0f172a;
  --dark-surface: #1e293b;
  --dark-surface-2: #334155;
  --dark-border: #334155;
  --dark-text: #e2e8f0;
  --dark-text-2: #94a3b8;

  /* ===== 字号（保持克制，两级字重 400/500） ===== */
  --fs-h1: 15px;   --fs-h2: 14px;  --fs-h3: 13px;
  --fs-body: 13px; --fs-sm: 12px;  --fs-xs: 11px;
  --fw-normal: 400; --fw-medium: 500;

  /* ===== 圆角 ===== */
  --radius-sm: 6px; --radius-md: 8px;
  --radius-lg: 12px; --radius-xl: 16px;

  /* ===== 阴影（三级） ===== */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.18);

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

  /* ===== 布局 ===== */
  --sidebar-w: 240px;
  --topbar-h: 56px;
  --content-pad: 24px;

  /* ===== 字体 ===== */
  --font-sans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Consolas', 'Menlo', monospace;

  /* ===== 过渡 ===== */
  --tr-fast: .15s ease;
  --tr-base: .25s ease;
}

/* ============================================================
   基础重置
   ============================================================ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: var(--fs-body);
  line-height: 1.6;
}

/* ============================================================
   组件样式约定（供 4 模块统一复用）
   ============================================================ */

/* —— 按钮 —— */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  cursor: pointer; transition: all var(--tr-fast); white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn.primary:hover { background: var(--primary-dark); }
.btn.sm { padding: 4px 10px; font-size: var(--fs-xs); }

/* —— 卡片 —— */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.card.hover:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }

/* —— 统计卡 —— */
.stat-card {
  background: var(--surface); border-radius: var(--radius-lg);
  padding: var(--sp-4); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.stat-card .label { font-size: var(--fs-xs); color: var(--text-2); }
.stat-card .value { font-size: 26px; font-weight: var(--fw-medium); line-height: 1.2; }
.stat-card .sub   { font-size: var(--fs-xs); color: var(--text-2); }

/* —— 徽章 —— */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap;
}
.badge.success { background: var(--success-bg); color: var(--success); }
.badge.warning { background: var(--warning-bg); color: var(--warning); }
.badge.danger  { background: var(--danger-bg);  color: var(--danger); }
.badge.info    { background: var(--info-bg);    color: var(--info); }
.badge.muted   { background: var(--surface-2);  color: var(--text-2); }

/* —— 表格 —— */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.data-table th {
  background: var(--surface-2); padding: 9px 12px; text-align: left;
  font-weight: var(--fw-medium); color: var(--text-2); border-bottom: 1px solid var(--border);
}
.data-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.data-table tr:hover td { background: var(--primary-50); }

/* —— 导航项 —— */
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; cursor: pointer; font-size: var(--fs-body);
  color: var(--dark-text-2); border-left: 3px solid transparent;
  transition: all var(--tr-fast); user-select: none;
}
.nav-item:hover { background: var(--dark-surface-2); color: var(--dark-text); }
.nav-item.active { background: rgba(26,86,219,.25); color: #fff; border-left-color: var(--primary); font-weight: var(--fw-medium); }
.nav-item .badge { margin-left: auto; }

/* —— 空状态 —— */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-2); }
.empty-state .icon { font-size: 48px; opacity: .3; margin-bottom: 12px; }

/* —— Toast —— */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--dark-bg); color: #fff; padding: 10px 20px;
  border-radius: var(--radius-md); font-size: var(--fs-sm); z-index: 999;
  opacity: 0; transition: all var(--tr-base); pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

/* —— 滚动条 —— */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }