/* ==============================================
 * 美店轻管家 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;

  /* === 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;

  /* === 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: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.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: 12px; }
.fs-13 { font-size: 13px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-24 { font-size: 24px; }
.fs-28 { font-size: 28px; }

.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; }