/**
 * 响应式间距系统 - 增强版
 * 
 * 基于4/8/12步进的统一间距体系
 * 使用clamp()函数实现更平滑的响应式过渡
 */

:root {
  /* 基础间距单位 - 4px步进 */
  --space-unit: 4px;
  
  /* 间距变量 - 使用clamp()函数实现响应式 */
  --space-xs: clamp(4px, 0.5vw, 8px);           /* 超小间距: 4-8px */
  --space-sm: clamp(8px, 1vw, 12px);            /* 小间距: 8-12px */
  --space-md: clamp(16px, 2vw, 24px);           /* 中间距: 16-24px */
  --space-lg: clamp(24px, 3vw, 36px);           /* 大间距: 24-36px */
  --space-xl: clamp(32px, 4vw, 48px);           /* 超大间距: 32-48px */
  --space-xxl: clamp(48px, 6vw, 72px);          /* 特大间距: 48-72px */
  
  /* 区块间距 - 用于section之间 */
  --section-space-sm: clamp(32px, 4vw, 48px);   /* 小区块间距: 32-48px */
  --section-space-md: clamp(48px, 6vw, 72px);   /* 中区块间距: 48-72px */
  --section-space-lg: clamp(64px, 8vw, 96px);   /* 大区块间距: 64-96px */
  
  /* 内边距 - 用于卡片、容器等 */
  --padding-xs: clamp(8px, 1vw, 12px);          /* 超小内边距: 8-12px */
  --padding-sm: clamp(12px, 1.5vw, 16px);       /* 小内边距: 12-16px */
  --padding-md: clamp(16px, 2vw, 24px);         /* 中内边距: 16-24px */
  --padding-lg: clamp(24px, 3vw, 32px);         /* 大内边距: 24-32px */
  
  /* 容器最大宽度 */
  --container-max-width: 1200px;
  --container-narrow: 960px;
  
  /* 容器边距 - 随屏幕宽度变化 */
  --container-padding: clamp(16px, 4vw, 40px);
}

/* 移动端优化 - 更紧凑的间距 */
@media (max-width: 768px) {
  :root {
    /* 移动端间距缩小 */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 20px;
    --space-xl: 28px;
    --space-xxl: 40px;
    
    /* 移动端区块间距缩小 */
    --section-space-sm: 28px;
    --section-space-md: 40px;
    --section-space-lg: 56px;
    
    /* 移动端内边距缩小 */
    --padding-xs: 8px;
    --padding-sm: 12px;
    --padding-md: 16px;
    --padding-lg: 20px;
    
    /* 移动端容器边距缩小 */
    --container-padding: 16px;
  }
}

/* 小屏幕设备 - 更紧凑的间距 */
@media (max-width: 480px) {
  :root {
    /* 小屏幕间距进一步缩小 */
    --space-md: 8px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-xxl: 32px;
    
    /* 小屏幕区块间距进一步缩小 */
    --section-space-sm: 24px;
    --section-space-md: 32px;
    --section-space-lg: 48px;
    
    /* 小屏幕内边距进一步缩小 */
    --padding-md: 12px;
    --padding-lg: 16px;
  }
}

/* 容器类 */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container-narrow {
  max-width: var(--container-narrow);
}

/* 间距工具类 */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }

.m-xs { margin: var(--space-xs) !important; }
.mt-xs { margin-top: var(--space-xs) !important; }
.mr-xs { margin-right: var(--space-xs) !important; }
.mb-xs { margin-bottom: var(--space-xs) !important; }
.ml-xs { margin-left: var(--space-xs) !important; }

.m-sm { margin: var(--space-sm) !important; }
.mt-sm { margin-top: var(--space-sm) !important; }
.mr-sm { margin-right: var(--space-sm) !important; }
.mb-sm { margin-bottom: var(--space-sm) !important; }
.ml-sm { margin-left: var(--space-sm) !important; }

.m-md { margin: var(--space-md) !important; }
.mt-md { margin-top: var(--space-md) !important; }
.mr-md { margin-right: var(--space-md) !important; }
.mb-md { margin-bottom: var(--space-md) !important; }
.ml-md { margin-left: var(--space-md) !important; }

.m-lg { margin: var(--space-lg) !important; }
.mt-lg { margin-top: var(--space-lg) !important; }
.mr-lg { margin-right: var(--space-lg) !important; }
.mb-lg { margin-bottom: var(--space-lg) !important; }
.ml-lg { margin-left: var(--space-lg) !important; }

.m-xl { margin: var(--space-xl) !important; }
.mt-xl { margin-top: var(--space-xl) !important; }
.mr-xl { margin-right: var(--space-xl) !important; }
.mb-xl { margin-bottom: var(--space-xl) !important; }
.ml-xl { margin-left: var(--space-xl) !important; }

/* 内边距工具类 */
.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }

.p-xs { padding: var(--padding-xs) !important; }
.pt-xs { padding-top: var(--padding-xs) !important; }
.pr-xs { padding-right: var(--padding-xs) !important; }
.pb-xs { padding-bottom: var(--padding-xs) !important; }
.pl-xs { padding-left: var(--padding-xs) !important; }

.p-sm { padding: var(--padding-sm) !important; }
.pt-sm { padding-top: var(--padding-sm) !important; }
.pr-sm { padding-right: var(--padding-sm) !important; }
.pb-sm { padding-bottom: var(--padding-sm) !important; }
.pl-sm { padding-left: var(--padding-sm) !important; }

.p-md { padding: var(--padding-md) !important; }
.pt-md { padding-top: var(--padding-md) !important; }
.pr-md { padding-right: var(--padding-md) !important; }
.pb-md { padding-bottom: var(--padding-md) !important; }
.pl-md { padding-left: var(--padding-md) !important; }

.p-lg { padding: var(--padding-lg) !important; }
.pt-lg { padding-top: var(--padding-lg) !important; }
.pr-lg { padding-right: var(--padding-lg) !important; }
.pb-lg { padding-bottom: var(--padding-lg) !important; }
.pl-lg { padding-left: var(--padding-lg) !important; }

/* 区块间距 */
.section {
  padding-top: var(--section-space-md);
  padding-bottom: var(--section-space-md);
}

.section-sm {
  padding-top: var(--section-space-sm);
  padding-bottom: var(--section-space-sm);
}

.section-lg {
  padding-top: var(--section-space-lg);
  padding-bottom: var(--section-space-lg);
}

/* 间距工具类 - 仅在特定屏幕尺寸上应用 */
@media (max-width: 768px) {
  .m-md-only { margin: var(--space-md) !important; }
  .mt-md-only { margin-top: var(--space-md) !important; }
  .mb-md-only { margin-bottom: var(--space-md) !important; }
  
  .p-md-only { padding: var(--padding-md) !important; }
  .pt-md-only { padding-top: var(--padding-md) !important; }
  .pb-md-only { padding-bottom: var(--padding-md) !important; }
}

@media (max-width: 480px) {
  .m-sm-only { margin: var(--space-sm) !important; }
  .mt-sm-only { margin-top: var(--space-sm) !important; }
  .mb-sm-only { margin-bottom: var(--space-sm) !important; }
  
  .p-sm-only { padding: var(--padding-sm) !important; }
  .pt-sm-only { padding-top: var(--padding-sm) !important; }
  .pb-sm-only { padding-bottom: var(--padding-sm) !important; }
}

/* 卡片组件间距 */
.card {
  padding: var(--padding-md);
  margin-bottom: var(--space-md);
}

/* 表单元素间距 */
.form-group {
  margin-bottom: var(--space-md);
}

/* 按钮间距 */
.btn + .btn {
  margin-left: var(--space-sm);
}

@media (max-width: 480px) {
  .btn + .btn {
    margin-left: var(--space-xs);
  }
}

/* 网格间距 */
.grid {
  display: grid;
  gap: var(--space-md);
}

.grid-sm {
  gap: var(--space-sm);
}

.grid-lg {
  gap: var(--space-lg);
}

@media (max-width: 768px) {
  .grid {
    gap: var(--space-sm);
  }
  
  .grid-lg {
    gap: var(--space-md);
  }
}