/* tokens.css — 全局设计令牌（三页共用，杜绝样式漂移）
 * 颜色 / 字号 / 间距 / 圆角 / 阴影 / 动效时长统一在此定义；
 * sidebar.html / merchant.html / admin.html 通过 <link> 引入，硬编码色值改引用变量。
 */

/* Inter(免费商用)：数字/英文专用，仅 latin 子集 ~46KB。
 * 中文继续走系统栈(--font-sans)，避免引入数 MB 中文字体拖慢企微 H5 首屏。 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2');
}

:root {
  /* 品牌与语义色（默认=内部/运营后台蓝主题；门店橙见 .merchant-theme） */
  --brand: #1565c0;
  --brand-hover: #0f4fa8;
  --brand-soft: #eaf3ff;
  --text: #1f1f1f;
  --text-muted: #595959;
  --bg: #f5f6f8;
  --bg-alt: #f0f2f5;
  --surface: #ffffff;
  --border: #e3e6ea;
  --border-strong: #d9d9d9;
  --success: #0a7d3e;
  --success-soft: #e8f8ee;
  --success-text: #047857;   /* 文字用途专用（达 4.5:1）；原 --success 仅作填充/边框，勿作小字文字色 */
  --warning: #b45309;
  --warning-soft: #fff7e6;
  --danger: #c0341d;
  --danger-soft: #fff2e8;
  --info: #2563eb;
  --info-soft: #eff6ff;
  --on-brand: #ffffff;

  /* 字号（旧版兼容，逐步废弃 → 请用下方语义化 token） */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 15px;
  --fs-xl: 16px;

  /* ============================================================
     字号层级（语义化 · 权威 · 匹配舒适大字号基线 15px）
     设计原则：目标用户为宠物店老板（数字化偏弱），基调偏舒适大号，
     降低阅读疲劳。今后新页面一律引用语义 token，禁止硬编码 px 字号。
     ============================================================ */
  --fs-micro: 11px;      /* 微状态标签 / 密集界面徽标：tag · mode · flag · step */
  --fs-caption: 12px;    /* 次要说明 / 错误提示 / 面包屑 */
  --fs-label: 13px;      /* 字段标签 / 辅助文字 / 表头 / 副信息 */
  --fs-body-sm: 14px;    /* 信息正文 / 表格 / 按钮 / chip */
  --fs-body: 15px;       /* 阅读舒适基线：body · 输入框 · 导航项 · 卡片标题 */
  --fs-emphasis: 16px;   /* 品牌名 / 页面标题 / 价格强调 */
  --fs-title: 22px;      /* 登录 / 首屏主标题 */
  --fs-display: 28px;    /* 大数字 / 统计展示（备用） */

  /* 间距（4pt 栅格，base 16 后继续延伸） */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;   /* 4pt 栅格补档：原刻度跳过 7，致 ui.css .grp-hd 引用未定义变量而整条 margin 失效 */
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* 圆角
     注意：圆角权威命名是 --r-*（--r-sm 6 / --r 10 / --r-md 14 / --r-lg 18，全站 109 处使用）。
     下方 --radius-pill 为文档 §7 记载的胶囊 token，保留兼容。
     原 --radius-sm/md/lg 已删除：全站 0 引用，且与 --r-* 同名不同值（8 vs 14 / 12 vs 18），
     属高危命名陷阱（详见设计系统冲突复核 C-5）。需要圆角请一律用 --r-*。 */
  --radius-pill: 14px;

  /* 阴影 */
  --shadow-card: 0 1px 4px rgba(0, 0, 0, .04);
  --shadow-pop: 0 6px 20px rgba(0, 0, 0, .12);

  /* 动效时长与缓动 */
  --motion-fast: 150ms;
  --motion-normal: 220ms;
  --motion-ease: ease;

  /* ============================================================
     v3 精调扩展(只增不改,向后兼容)：
     方案 B 字体排版 + 深色侧边栏 + 功能图标色 + 精细中性/圆角/阴影
     ============================================================ */

  /* ---- 字体(方案 B:精调系统栈,0 加载成本;数字走 Inter) ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC",
    "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-num: "Inter", "SF Pro Text", "SF Compact", "Helvetica Neue", Arial, sans-serif;

  /* ---- 字重(标题用 650,正文 500,小字 400) ---- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 650;

  /* ---- 字距 ---- */
  --tracking-tight: -0.025em;
  --tracking-snug: -0.01em;
  --tracking-num: -0.03em;

  /* ---- 过渡时长（动效统一口径） ---- */
  --t-fast: 150ms;
  --t-normal: 240ms;
  --t-slow: 360ms;

  /* ---- 中性色三级灰(比旧 --text-muted 更细) ---- */
  --text-2: #374151;
  --text-subtle: #5e6c7e;   /* 原 #94a3b8：浅底对比度 2.56:1 → 5.4:1，达 WCAG AA 4.5:1（UI 审查 #1） */
  --surface-2: #fbfcfd;

  /* ---- v3 深色侧边栏(高级感核心) ---- */
  --side-bg: #14171f;
  --side-bg-2: #1a1e28;
  --side-text: #cbd5e1;
  --side-text-2: #94a3b8;
  --side-text-muted: #475569;
  --side-border: rgba(255, 255, 255, 0.06);
  --side-hover: rgba(255, 255, 255, 0.05);
  --side-active: rgba(255, 255, 255, 0.10);
  --side-icon-bg: rgba(255, 255, 255, 0.07);
  --side-icon-active-bg: #c2410c;

  /* ---- 功能图标色彩(应用胶囊卡片用,7 色系) ---- */
  --c-blue: #2563eb;   --c-blue-soft: #dbeafe;
  --c-green: #10b981;  --c-green-soft: #d1fae5;
  --c-red: #ef4444;    --c-red-soft: #fee2e2;
  --c-amber: #f59e0b;  --c-amber-soft: #fef3c7;
  --c-amber-text: #b45309;   /* 文字用途专用（达 4.5:1）；原 --c-amber 仅作填充/边框，勿作小字文字色 */
  --c-violet: #8b5cf6; --c-violet-soft: #ede9fe;
  --c-cyan: #06b6d4;   --c-cyan-soft: #cffafe;
  --c-pink: #ec4899;   --c-pink-soft: #fce7f3;

  /* ---- 圆角(新命名,旧 --radius-* 保留) ---- */
  --r-sm: 6px;
  --r: 10px;
  --r-md: 14px;
  --r-lg: 18px;

  /* ---- 响应式断点（规范 · 单一事实源）----
     注意：CSS 的 @media 条件无法引用自定义属性（var()），
     故此处以"注释数值"形式固化规范，组件媒体查询直接对齐下列档位。
     新增/调整断点时，必须从本表取值，禁止散落魔法数字。
       480px  手机竖屏      —— 单栏、抽屉/弹层全宽
       768px  平板竖屏      —— 双栏收单栏、侧栏收起
       1024px 小桌面/平板横屏 —— 多栏降一档
       1280px 宽桌面        —— app-grid 满栏
     现状收敛目标：把散落的 520/720/800/860/900/980/1100 逐步对齐到上表四档。 */

  /* ---- 阴影(极轻,边框优先) ---- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.03);
  --shadow-pop-v3: 0 16px 40px -8px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06);

  /* ---- 组件尺寸（统一控件规格，杜绝高度漂移） ---- */
  --control-h: 34px;        /* 标准表单控件高度（input / select）—— 已全站统一 */
  --control-h-lg: 42px;     /* 登录 / 重点输入框高度 */
  --btn-h: 36px;            /* 标准按钮高度 */
  --btn-h-lg: 44px;         /* 大按钮 / 主操作高度（≥44px 触控友好） */
  --icon-box: 24px;         /* 导航 / 列表图标盒 */
  --icon-box-lg: 26px;      /* 放大图标盒（导航项） */
  --sidebar-w: 224px;       /* 后台侧边栏宽度 */
  --content-max: 1280px;    /* 内容区最大宽度 */
}

/* ============================================================
   门店侧橙主题（merchant.html / sidebar.html 唯一真相源）
   设计系统 §1.2：门店侧用 <body class="merchant-theme"> 切换橙品牌。
   这里收纳门店侧的整套差异值（品牌色 + 中性色 + 语义色 + 阴影 + 圆角），
   页面不再本地重写；未来换肤 / dark mode 只改这一处。
   ============================================================ */
.merchant-theme {
  /* 品牌四色（暖橙，门店侧） */
  --brand: #c2410c;
  --brand-hover: #9a3412;
  --brand-soft: #fdf3ec;
  --brand-softer: #fef7f1;
  --on-brand: #ffffff;
  --brand-tint: rgba(194, 65, 12, 0.08);
  --brand-tint-strong: rgba(194, 65, 12, 0.18);
  /* 品牌浅描边 / 极浅实心底：pill、未入库标签、日历「今天」等场景需要
     「看得见但不抢眼」的品牌色，此前散落在各页硬编码，换肤会漏色，故收成 token */
  --brand-border: #f3cdbd;
  --brand-tint-solid: #fff7ed;

  /* v3 精调：中性灰阶 + 语义色（方案 B，冷灰系） */
  --text: #0f172a;
  --text-2: #334155;
  --text-muted: #475569;   /* 原 #64748b：浅底对比度 4.3:1 → 7.6:1；仍比 --text-subtle 深，层级不乱（UI 审查 #1） */
  --text-subtle: #5e6c7e;   /* 原 #94a3b8：浅底对比度 2.56:1 → 5.4:1，达 WCAG AA 4.5:1（UI 审查 #1） */
  --bg: #f5f7fa;
  --bg-alt: #eef1f5;
  --surface: #ffffff;
  --surface-2: #fbfcfd;
  --border: #e7eaef;
  --border-strong: #d4d8df;
  --success: #059669;  --success-soft: #ecfdf5;
  --success-text: #047857;   /* 文字用途专用（达 4.5:1）；原 --success 仅作填充/边框，勿作小字文字色 */
  --warning: #d97706;  --warning-soft: #fffbeb;
  --danger: #dc2626;   --danger-soft: #fef2f2;
  --info: #2563eb;     --info-soft: #eff6ff;

  /* 深色侧边栏激活色对齐品牌 */
  --side-icon-active-bg: #c2410c;

  /* 阴影：边框优先，极轻 */
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.03);

  /* 圆角（新命名，与 :root 同值，保持主题内完整自洽） */
  --r-sm: 6px; --r: 10px; --r-md: 14px; --r-lg: 18px;
}

/* P2-4：全局动效降级，覆盖气泡 / loader / 折叠箭头 / toast / 滚动等所有动效，
   不只气泡一处。开启"减少动态效果"的系统用户不再被动画打扰。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}