/* ==============================================
 * 美店轻管家 admin · Design Tokens & Theme
 * 参考 firepos-admin 视觉体系，主色采用 firepos 同款橙
 * ============================================== */

:root {
  /* === Brand === */
  --brand-primary: #FB7B10;
  --brand-primary-hover: #FC8F33;
  --brand-primary-active: #E56E0D;
  --brand-primary-bg: #FFF3E6;
  --brand-primary-bg-strong: #FFE2C2;
  --brand-primary-border: #FFD7B0;
  --brand-primary-light: #FCA55D;

  /* === Neutral === */
  --text-primary: #353535;
  --text-regular: #606266;
  --text-secondary: #909399;
  --text-placeholder: #C0C4CC;
  --text-l1: #000000;
  --text-l2: #333333;
  --text-ink: #1F2329;
  --text-ink-deep: #1A1A1A;
  --text-muted: #5A6273;
  --text-strong: #303133;

  --border-base: #DCDFE6;
  --border-light: #E4E7ED;
  --border-lighter: #EBEEF5;
  --border-extra: #F2F6FC;

  --bg-page: #F7F7F7;
  --bg-card: #FFFFFF;
  --bg-sider: #F2F2F2;
  --bg-submenu: #F2F2F2;
  --bg-hover: #F5F7FA;
  --bg-gray-50: #FAFAFA;
  --bg-gray-100: #F0F0F0;
  --bg-cool-50: #FAFBFC;
  --bg-warm-50: #FFF8F2;

  /* === Semantic === */
  --color-success: #1E866F;
  --color-warning: #C9862B;
  --color-danger: #BB4052;
  --color-info: #3D60D3;

  /* === W4 收编 token（2026-07-05）：从页面内联 hex 收敛而来，值=原 hex，视觉零变化。
   *     新页面禁再写裸 hex；同语义优先复用下列 token。 === */
  --text-inverse: #FFFFFF;             /* 彩色/深色底上的反白文字 */
  --text-warning-deep: #D89614;        /* 琥珀警示文字（提示条/差异提醒） */
  --text-amber-deep: #8A4B00;          /* 深琥珀标签文字（商品预览标签） */
  --bg-warning-soft: #FFF7E6;          /* 琥珀警示浅底（提示条） */
  --bg-amber-soft: #FFF7EB;            /* 琥珀浅底（收银结果卡） */
  --border-warning-soft: #FFE58F;      /* 琥珀警示描边 */
  --border-amber-soft: #FFE7BA;        /* 琥珀浅描边（营销提示条） */
  --border-cool: #EEF0F2;              /* 冷灰分隔线（商品编辑页脚/头） */
  --bg-cool-100: #EEF1F6;              /* 冷灰浅底（矩阵对角/hover） */
  --bg-fill-light: #F7F8FA;            /* 浅填充底（筛选条/摘要块） */
  --color-rating: #F7BA2A;             /* 评分星星金 */
  --chart-blue: #1E6FFF;               /* 图表蓝（利用率/进度条） */
  --st-mx-exclusive: #E8702A;          /* 营销互斥（exclusion 矩阵语义色） */
  --st-mx-shareable: #2BA471;          /* 营销共享（exclusion 矩阵语义色） */
  --code-bg: #1E1E1E;                  /* 代码/JSON 展示深底 */
  --code-text: #E0E0E0;                /* 代码/JSON 展示浅字 */
  --brand-primary-soft: #FFF2E6;       /* 品牌浅底（商品预览占位，历史值与 --brand-primary-bg 差 1 阶） */
  --pv-phone-frame: #1F2430;           /* 小程序预览：手机模拟边框 */
  --pv-page-bg: #F4F5F7;               /* 小程序预览：页面底色（仿顾客端） */
  --bg-img-placeholder: #EEEEEE;       /* 图片占位灰 */
  --bg-img-placeholder-light: #F5F5F5; /* 图片占位浅灰 */

  /* === Shadow === */
  --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* === Size === */
  --sidebar-l1-width: 94px;
  --sidebar-l2-width: 140px;
  --topbar-height: 50px;
  --page-title-height: 44px;
  --l1-item-height: 40px;
  --l2-item-height: 36px;

  /* === Radius === */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* === Type Scale（docs/design/design-language.md §标度；页面字号一律走 var/.fs-*，禁手写 px）=== */
  --fs-caption: 12px;   /* 辅助说明/meta */
  --fs-label: 13px;     /* 标签/次要按钮 */
  --fs-body: 14px;      /* 正文（=body 基准） */
  --fs-strong: 16px;    /* 卡片标题/重要项 */
  --fs-subtitle: 18px;  /* 区块标题 */
  --fs-title: 20px;     /* 页面主标题 */
  --fs-headline: 24px;  /* 大标题 */
  --fs-display: 28px;   /* KPI/金额大数字 */

  /* === Space Scale（4 的倍数；间距一律走 var/.gap-*）=== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* === Typography === */
  --font-family: "Helvetica Neue", Helvetica, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;

  /* === Element Plus Override === */
  --el-color-primary: var(--brand-primary);
  --el-color-primary-light-3: #FC9849;
  --el-color-primary-light-5: #FDB474;
  --el-color-primary-light-7: #FED0A0;
  --el-color-primary-light-8: #FEDCB6;
  --el-color-primary-light-9: #FFE8CD;
  --el-color-primary-dark-2: #C96308;
  --el-border-radius-base: 2px;
  --el-border-radius-small: 2px;
  --el-font-family: var(--font-family);
}

* { box-sizing: border-box; }

html, body, #app {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  font-size: 14px;
  color: var(--text-regular);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #D4D7DC; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #B0B4BA; }
::-webkit-scrollbar-track { background: transparent; }

.flex { display: flex; }
.flex-y-center { display: flex; align-items: center; }
.flex-bt { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-1 { flex: 1; }
.gap-4 { gap: var(--space-1); }
.gap-8 { gap: var(--space-2); }
.gap-12 { gap: var(--space-3); }
.gap-16 { gap: var(--space-4); }
.gap-24 { gap: var(--space-6); }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.text-secondary { color: var(--text-secondary); }
.text-primary-brand { color: var(--brand-primary); }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fs-12 { font-size: var(--fs-caption); }
.fs-13 { font-size: var(--fs-label); }
.fs-16 { font-size: var(--fs-strong); }
.fs-18 { font-size: var(--fs-subtitle); }
.fs-20 { font-size: var(--fs-title); }
.fs-24 { font-size: var(--fs-headline); }
.fs-28 { font-size: var(--fs-display); }

.money,
.kpi-num,
.stat-num { font-variant-numeric: tabular-nums; }

.kpi-num { font-size: 28px; font-weight: 800; color: var(--text-ink); line-height: 1.2; }