/* ==========================================================================
   采购智能辅助系统 · 设计令牌
   依据《采购智能辅助系统-UI设计规范文档 V1.0》逐条落地
   ========================================================================== */

:root {
  /* ---- 2.1 基础色板 ---- */
  --c-primary:          #027BD0; /* 主色调 */
  --c-title:            #101015; /* 标题色 */
  --c-text:             #494952; /* 正文色 */
  --c-text-2:           #A4A5B3; /* 辅助文字色 */
  --c-icon:             #C5C5D1; /* 图标色 */
  --c-border:           #D7D8E0; /* 分割线色 */
  --c-thead:            #F5F7F9; /* 列表表头色 */
  --c-bg:               #F9F9F9; /* 页面背景色 */
  --c-white:            #FFFFFF;
  --c-split:            #EBEDF0; /* 表格行分割线 */

  /* ---- 2.2 功能色板 ---- */
  --c-success:          #34A853;
  --c-warning:          #FAAD14;
  --c-danger:           #F5222D;
  --c-info:             #027BD0;

  --c-success-bg:       #E8F7EC;
  --c-warning-bg:       #FFFBE6;
  --c-danger-bg:        #FEECEC;
  --c-info-bg:          #E6F4FC;
  --c-gray-bg:          #F5F7F9;

  /* ---- 2.3 主色阶 ---- */
  --c-primary-100:      #E6F4FC; /* 主色浅底：选中行/标签底/hover浅底 */
  --c-primary-200:      #B3DBF2; /* 主色边框浅色 */
  --c-primary-500:      #027BD0; /* 标准值 */
  --c-primary-600:      #026BB5; /* hover */
  --c-primary-700:      #015A9A; /* active */
  --c-primary-800:      #014A80; /* 深色强调 */

  /* ---- 3.1 字体族 ---- */
  --font-cn:  "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
  --font-num: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: Consolas, Monaco, "Courier New", monospace;
  --font: var(--font-cn);

  /* ---- 4.2 间距系统（8px 基准栅格，所有尺寸/间距必须为 4 的倍数） ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-9: 36px;
  --sp-10: 40px;
  --sp-11: 44px;
  --sp-12: 48px;
  --sp-13: 52px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-18: 72px;
  --sp-20: 80px;

  /* ---- 4.3 圆角规范（统一 4px） ---- */
  --r-xs: 4px;   /* 小元素：标签/勾选/徽章 */
  --r-sm: 4px;   /* 基准圆角：按钮/输入框/下拉/表格容器 */
  --r-md: 4px;   /* 卡片/弹窗/大容器 */
  --r-lg: 4px;   /* 大型弹窗/特殊卡片 */
  --r-full: 999px; /* 仅用于圆形/胶囊元素（头像、开关、徽标） */

  /* ---- 4.4 阴影规范 ---- */
  --sh-hover: 0 2px 8px rgba(0, 0, 0, .08);   /* 悬浮 */
  --sh-modal: 0 4px 16px rgba(0, 0, 0, .12);  /* 弹窗 */
  --sh-pop: 0 6px 20px rgba(0, 0, 0, .14);    /* 下拉弹层（无边框，靠阴影分层） */
  --sh-fixed: 0 2px 4px rgba(0, 0, 0, .06);   /* 固定 */
  --sh-mask:  rgba(0, 0, 0, .45);

  /* ---- 4.1 整体布局尺寸（全部 4 的倍数） ---- */
  --h-topnav: 56px;
  --h-tabs:   40px;
  --w-menu:   220px;
  --w-menu-collapsed: 64px;
  --h-header: 48px;  /* 表头高度 */
  --h-row:    48px;  /* 行高 */
  --h-ctl:    32px;  /* 控件基准高度 */
  --h-tag:    24px;
  --h-modal-head: 52px;
  --h-modal-foot: 56px;

  /* ---- 17 动效规范 ---- */
  --e-fast:   .1s ease-out;
  --e-normal: .2s ease-in-out;
  --e-slow:   .3s ease-in-out;
}

/* ==========================================================================
   基础重置与排版
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 22px;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, ul, ol, dl { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-primary-600); }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
img, svg { vertical-align: middle; }
em { font-style: normal; }
b, strong { font-weight: 600; }
hr { border: none; border-top: 1px solid var(--c-border); margin: var(--sp-4) 0; }

::selection { background: var(--c-primary-200); color: var(--c-title); }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D9DBE3; border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: #C2C5D0; }

/* 尊重系统"减少动态效果"设置（规范 17 条） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   3.2 字号层级工具类
   ========================================================================== */
.t-h1    { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--c-title); }
.t-h2    { font-size: 18px; line-height: 26px; font-weight: 600; color: var(--c-title); }
.t-h3    { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--c-title); }
.t-h4    { font-size: 14px; line-height: 22px; font-weight: 500; color: var(--c-title); }
.t-body  { font-size: 14px; line-height: 22px; color: var(--c-text); }
.t-sm    { font-size: 13px; line-height: 20px; color: var(--c-text); }
.t-xs    { font-size: 12px; line-height: 18px; color: var(--c-text-2); }
.t-num   { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.t-mono  { font-family: var(--font-mono); }
.t-muted { color: var(--c-text-2); }
.t-title { color: var(--c-title); }
.t-primary { color: var(--c-primary); }
.t-success { color: var(--c-success); }
.t-warning { color: var(--c-warning); }
.t-danger  { color: var(--c-danger); }
.t-right { text-align: right; }
.t-center { text-align: center; }
.t-nowrap { white-space: nowrap; }
.t-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-strong { font-weight: 600; }

/* 常用布局工具类 */
.row { display: flex; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.row-start { display: flex; align-items: flex-start; }
.col { display: flex; flex-direction: column; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; }
.gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; }
.mt-2 { margin-top: 8px; }  .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; } .mb-6 { margin-bottom: 24px; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}