/**
 * m-tokens.css — 经营中心手机版设计令牌（规范基座）
 *
 * 使用约束（docs/MOBILE-CENTER-DESIGN.md §4.4）：
 * - 主色与首页、经营中心当前蓝灰品牌保持一致
 * - 禁止硬编码颜色值，一律引用本文件令牌
 * - 暗黑模式由 JS（m-core.js M.theme）在 <html> 上设置 data-m-theme，双套变量切换
 * - 禁止在页面 CSS 中新增 !important（PROJECT-RULES §14.6）
 *
 * @version 1.0.0
 * @date 2026-08-13
 */

:root {
  /* ==================== 品牌色（蓝灰 / 暖白，继承首页工作台品牌） ==================== */
  --m-primary: #506f93;
  --m-on-primary: #ffffff;
  --m-primary-light: #6d87a3;
  --m-primary-lighter: #98a9bd;
  --m-primary-dark: #354f70;
  --m-primary-bg: rgba(80, 111, 147, 0.09);
  --m-primary-glow: rgba(80, 111, 147, 0.2);
  --m-gradient-main: linear-gradient(135deg, #354f70 0%, #58728e 100%);

  /* ==================== 语义状态色 ==================== */
  --m-success: #347967;
  --m-success-bg: #edf6f1;
  --m-warning: #946e32;
  --m-warning-bg: #faf4e9;
  --m-danger: #b34f59;
  --m-danger-bg: #fbf0f1;
  --m-info: #506f93;
  --m-info-bg: #eaf0f6;
  --m-neutral: #7c8a98;
  --m-neutral-bg: #eef1f4;

  /* 涨跌色：红涨绿跌（国内电商惯例），必须配 ↑↓ 箭头使用，禁止仅颜色传义 */
  --m-up: #b34f59;
  --m-up-bg: #fbf0f1;
  --m-down: #347967;
  --m-down-bg: #edf6f1;

  /* ==================== 中性色（light） ==================== */
  --m-bg: #f3f5f8;
  --m-surface: #ffffff;
  --m-surface-2: #f6f8fa;
  --m-border: #e3e9ef;
  --m-text: #25364d;
  --m-text-2: #586b80;
  --m-text-3: #5c6c80;
  --m-overlay: rgba(37, 54, 77, 0.42);

  /* ==================== 毛玻璃（Liquid Glass 低成本借鉴） ==================== */
  --m-glass-bg: rgba(255, 255, 255, 0.92);
  --m-glass-blur: 12px;
  --m-glass-border: rgba(227, 233, 239, 0.9);

  /* ==================== 圆角 ==================== */
  --m-radius-card: 14px;
  --m-radius-btn: 10px;
  --m-radius-sheet: 18px;
  --m-radius-chip: 999px;
  --m-radius-sm: 8px;

  /* ==================== 字号层级（移动端） ==================== */
  --m-fs-kpi: 30px;   /* KPI 主数字 */
  --m-fs-title: 20px; /* 页面大标题 */
  --m-fs-card: 16px;  /* 卡片标题/商品名 */
  --m-fs-body: 14px;  /* 正文 */
  --m-fs-caption: 12px; /* 辅助说明 */
  --m-fs-tag: 11px;   /* 徽章/角标 */

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

  /* ==================== 阴影 ==================== */
  --m-shadow-card: 0 2px 8px rgba(40, 60, 85, 0.05);
  --m-shadow-float: 0 5px 16px rgba(53, 79, 112, 0.2);
  --m-shadow-sheet: 0 -8px 32px rgba(37, 54, 77, 0.12);

  /* ==================== 层级（自包含体系，勿与 PC z-index-system 混用） ==================== */
  --m-z-tabbar: 100;
  --m-z-header: 90;
  --m-z-fab: 80;
  --m-z-sheet: 200;
  --m-z-toast: 22000;
  --m-z-refresh: 60;

  /* ==================== 布局 ==================== */
  --m-max-width: 480px;          /* 手机版页面最大宽度，桌面浏览器居中 */
  --m-header-h: 52px;            /* 毛玻璃顶栏高度 */
  --m-tabbar-h: 56px;            /* 底部 Tab 高度（不含安全区） */
  --m-touch-target: 44px;        /* 最小触控热区（HIG） */

  /* ==================== 动效 ==================== */
  --m-dur-fast: 120ms;
  --m-dur-base: 220ms;
  --m-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

:root[data-mobile-brand='a1'] {
  --m-radius-card: 8px;
  --m-radius-btn: 8px;
  --m-radius-sheet: 14px;
  --m-fs-kpi: 22px;
}

/* ==================== 暗黑模式（深灰层级，非纯黑；浮层比底色亮） ==================== */
[data-m-theme='dark'] {
  --m-bg: #161b22;
  --m-surface: #212934;
  --m-surface-2: #283443;
  --m-border: #334357;
  --m-text: #ecf1f6;
  --m-text-2: #afbdca;
  --m-text-3: #99a7b5;
  --m-primary: #9ab1ca;
  --m-on-primary: #161b22;
  --m-primary-dark: #b4c4d4;
  --m-gradient-main: linear-gradient(135deg, #405a77 0%, #526d88 100%);
  --m-success: #78b69c;
  --m-warning: #deb46d;
  --m-danger: #e49098;
  --m-info: #97b2d0;
  --m-neutral: #a5b0be;
  --m-up: #e49098;
  --m-down: #78b69c;
  --m-overlay: rgba(0, 0, 0, 0.6);
  --m-glass-bg: rgba(33, 41, 52, 0.92);
  --m-glass-border: rgba(175, 189, 202, 0.12);
  --m-primary-light: #93abc4;
  --m-primary-lighter: #b4c4d4;
  --m-primary-bg: rgba(109, 135, 163, 0.18);
  --m-primary-glow: rgba(109, 135, 163, 0.28);
  --m-success-bg: rgba(52, 121, 103, 0.18);
  --m-warning-bg: rgba(148, 110, 50, 0.2);
  --m-danger-bg: rgba(179, 79, 89, 0.18);
  --m-info-bg: rgba(80, 111, 147, 0.2);
  --m-neutral-bg: rgba(175, 189, 202, 0.12);
  --m-up-bg: rgba(179, 79, 89, 0.18);
  --m-down-bg: rgba(52, 121, 103, 0.18);
  --m-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
  --m-shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.5);
  --m-glass-blur: 18px;
}