/* ============================================================================
   东创进销存 · 设计令牌 Design Tokens
   ----------------------------------------------------------------------------
   唯一来源。所有页面禁止硬编码颜色/间距/字号，只用这里的变量。
   修改规则：改这里 → 全站生效。不要在组件里写死数值。

   设备基准（CSS 逻辑像素，非物理分辨率）：
     手机   408~430   Mate60 竖屏 408
     手机横 816~932   Mate60 横屏 816
     平板竖 800       MatePad 竖屏 800
     平板横 1280      MatePad 横屏 1280
     收银机 1280      12寸触摸，高 800（矮屏）
     笔记本 1280~1536 14寸，含系统缩放
     显示器 1920      22寸主流
     超宽屏 2560+     内容区限宽
   ========================================================================== */

:root {
  /* ---------- 颜色 ---------- */
  --c-primary:        #1e5eff;
  --c-primary-dark:   #1447cc;
  --c-primary-light:  #e8efff;
  --c-success:        #16a34a;
  --c-success-light:  #e8f7ee;
  --c-warning:        #e8930c;
  --c-warning-light:  #fdf3e2;
  --c-danger:         #e8402a;
  --c-danger-light:   #fdecea;
  --c-info-light:     #e8efff;

  --c-text:           #1b2333;
  --c-text-2:         #5f6b80;
  --c-text-3:         #97a1b3;
  --c-border:         #e3e8f0;
  --c-border-strong:  #c9d2e0;
  --c-bg:             #f4f6f9;
  --c-card:           #ffffff;
  --c-hover:          #f7f9fc;
  --c-mask:           rgba(15, 23, 42, .45);

  /* ---------- 间距（8px 基准）---------- */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;

  /* ---------- 字号（桌面鼠标为默认基准）---------- */
  --fs-xs:    12px;   /* 辅助：时间、提示 */
  --fs-head:  13px;   /* 表头、标签 */
  --fs-table: 14px;   /* 表格内容 */
  --fs-base:  15px;   /* 正文 */
  --fs-lg:    16px;   /* 强调、输入框 */
  --fs-title: 20px;   /* 页面标题 */
  --fs-stat:  28px;   /* 看板数字 */

  /* ---------- 行高 ---------- */
  --lh-tight: 1.35;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  /* ---------- 圆角 ---------- */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-full: 999px;

  /* ---------- 阴影 ---------- */
  --shadow-sm: 0 1px 2px rgba(20, 32, 60, .06);
  --shadow-md: 0 1px 3px rgba(20, 32, 60, .07), 0 4px 14px rgba(20, 32, 60, .05);
  --shadow-lg: 0 8px 30px rgba(20, 32, 60, .12);
  --shadow-mask: 0 24px 70px rgba(0, 0, 0, .3);

  /* ---------- 控件尺寸（桌面鼠标）---------- */
  --h-btn:    40px;
  --h-btn-sm: 32px;
  --h-input:  40px;
  --h-row:    44px;

  /* ---------- 触摸目标最小值 ---------- */
  --touch-min: 44px;

  /* ---------- 布局 ---------- */
  --sidebar-w:  220px;
  --sidebar-w-icon: 64px;
  --content-max: 1680px;   /* 超宽屏内容上限 */
  --page-pad:   24px;

  /* ---------- 层级 ---------- */
  --z-sticky:  10;
  --z-nav:     100;
  --z-mask:    1000;
  --z-modal:   1001;
  --z-toast:   2000;

  /* ---------- 动画 ---------- */
  --t-fast: 120ms;
  --t-base: 200ms;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================================
   设备适配覆盖
   顺序重要：越靠后越优先。手机覆盖平板，触摸覆盖鼠标。
   ========================================================================== */

/* ---------- 平板（640 ~ 1023）---------- */
@media (max-width: 1023px) {
  :root {
    --fs-table: 15px;
    --fs-base:  16px;
    --page-pad: 16px;
    --sidebar-w: var(--sidebar-w-icon);
  }
}

/* ---------- 手机（< 640）---------- */
@media (max-width: 639px) {
  :root {
    --fs-xs:    12px;
    --fs-head:  13px;
    --fs-table: 16px;
    --fs-base:  17px;
    --fs-lg:    17px;
    --fs-title: 19px;
    --fs-stat:  26px;
    --page-pad: 12px;
    --sp-lg:    16px;
  }
}

/* ---------- 触摸设备（手机/平板/收银机）：加大点击目标 ----------
   注意：这不只是尺寸问题。一台 1280 宽的收银机走桌面布局，
   但它是触摸屏，按钮必须按手机标准做大。                          */
/* any-pointer 也要算：Windows 平板插着鼠标时主指针是 fine，
   但手指还在用。只认 pointer: coarse 会让这类机器上的按钮变成 40px。 */
@media (pointer: coarse), (any-pointer: coarse) {
  :root {
    --h-btn:      48px;
    --h-btn-sm:   40px;
    --h-input:    48px;
    --h-row:      56px;
    --touch-min:  48px;
  }
}

/* ---------- 大屏触摸（收银机、平板横屏）：字号最大 ----------
   原因：站立操作距离 50~70cm，比笔记本远；
   店面环境光复杂，字小看不清。                                   */
@media (min-width: 1024px) and (any-pointer: coarse) {
  :root {
    --fs-head:  14px;
    --fs-table: 15px;
    --fs-base:  18px;
    --fs-lg:    18px;
    --fs-title: 22px;
  }
}

/* ---------- 矮屏（收银机 800 高、手机横屏 408 高）----------
   可用高度不足时压缩纵向密度，保住"一屏看到关键信息"。            */
@media (max-height: 700px) {
  :root {
    --h-row:    40px;
    --h-btn:    40px;
    --h-input:  40px;
    --sp-md:    12px;
    --sp-lg:    16px;
  }
}

/* 矮屏 + 触摸：收银机的典型组合，行高不能压太狠（手指点不准） */
@media (max-height: 700px) and (any-pointer: coarse) {
  :root {
    --h-row:  48px;
    --h-btn:  48px;
  }
}

/* ---------- 超宽屏：内容限宽居中 ---------- */
@media (min-width: 1921px) {
  :root {
    --fs-table: 15px;
    --fs-base:  16px;
    --fs-head:  14px;
  }
}

/* ---------- 横屏手机：隐藏底部导航，改侧边 ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --h-row: 40px;
  }
}