/* ========================================
   设计令牌系统 - 白色体系（紧凑模式）
   基于：前端优化方案与设计规范文档
   优化：缩小化处理，提升信息密度
   ======================================== */

:root {
  /* ===== 背景色（白→灰度层级）===== */
  --bg-page:           #FFFFFF;
  --bg-container:      #F8F9FA;
  --bg-card:           #FFFFFF;
  --bg-hover:          #F1F3F5;
  --bg-active:         #E9ECEF;
  --bg-disabled:       #F8F9FA;
  --bg-header:         #FFFFFF;
  --bg-sidebar:        #F8F9FA;
  --bg-base:           #FFFFFF;

  /* ===== 边框色 ===== */
  --border-light:      #E9ECEF;
  --border-default:    #DEE2E6;
  --border-medium:     #CED4DA;
  --border-dark:       #ADB5BD;

  /* ===== 文字色（灰度层级）===== */
  --text-primary:      #212529;
  --text-secondary:    #495057;
  --text-tertiary:     #6C757D;
  --text-disabled:     #ADB5BD;
  --text-inverse:      #FFFFFF;

  /* ===== 功能色（仅状态标识）===== */
  --color-success:     #2B8A3E;
  --color-warning:     #E67700;
  --color-error:       #C92A2A;
  --color-info:        #1C7ED6;

  /* ===== 功能色浅底 ===== */
  --bg-success:        #EBFBEE;
  --bg-warning:        #FFF9DB;
  --bg-error:          #FFF5F5;
  --bg-info:           #E7F5FF;

  /* ===== 主色调（品牌色）===== */
  --color-primary:     #212529;
  --color-primary-hover: #495057;
  --color-primary-active: #000000;
  --color-link:        #1C7ED6;
  --color-primary-alpha-15: rgba(33, 37, 41, 0.15);
  --color-primary-alpha-20: rgba(33, 37, 41, 0.20);
  --color-error-alpha-10: rgba(201, 42, 42, 0.10);

  /* ===== 阴影层级 ===== */
  --shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:         0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg:         0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-xl:         0 8px 32px rgba(0, 0, 0, 0.10);

  /* ===== 间距系统（紧凑化）===== */
  --space-xs:          2px;
  --space-sm:          6px;
  --space-md:          8px;
  --space-lg:          12px;
  --space-xl:          16px;
  --space-2xl:         20px;
  --space-3xl:         24px;

  /* ===== 圆角系统（紧凑化）===== */
  --radius-sm:         3px;
  --radius-md:         4px;
  --radius-lg:         6px;
  --radius-xl:         8px;

  /* ===== 字体大小（紧凑化）===== */
  --font-xs:           10px;
  --font-sm:           11px;
  --font-md:           12px;
  --font-lg:           13px;
  --font-xl:           14px;
  --font-2xl:          16px;
  --font-3xl:          18px;

  /* ===== 字体粗细 ===== */
  --weight-normal:     400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;

  /* ===== 组件尺寸（紧凑化）===== */
  --header-height:     40px;
  --page-header-height: 44px;
  --stat-card-height:  56px;
  --card-padding:      12px;
  --table-row-height:  36px;
  --form-gap:          12px;
  --tab-btn-padding-v: 4px;
  --tab-btn-padding-h: 10px;
  --input-height:      32px;

  /* ===== 过渡动画 ===== */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.2s ease;

  /* ===== 层级 ===== */
  --z-dropdown:        1000;
  --z-modal:           1050;
  --z-tooltip:         1100;

  /* ========== 侧边栏系统 ========== */
  
  /* 尺寸规范 - 紧凑型设计 */
  --sidebar-width:              180px;
  --sidebar-collapsed-width:    56px;
  --sidebar-nav-item-height:    36px;
  --sidebar-header-height:      48px;

  /* 颜色规范 */
  --bg-sidebar:                 #FFFFFF;
  --bg-sidebar-hover:           #F5F7FA;
  --bg-sidebar-active:          #E6F4FF;
  --border-sidebar:             #E5E7EB;

  /* 动画规范 */
  --sidebar-transition-duration: 200ms;
  --sidebar-transition-easing:   cubic-bezier(0, 0, 0.2, 1);

  /* 响应式断点 */
  --breakpoint-mobile:          768px;
  --breakpoint-tablet:          1024px;

  /* 导航项圆角 */
  --radius-nav-item:            4px;
  --radius-tooltip:             4px;
}
