/* 全局设计系统 - 基于Material Design 3和现代移动端最佳实践 */

/* ===== 颜色系统 ===== */
:root {
  /* 主色调 - 基于微信绿色调优化 */
  --primary-50: #e8f5e8;
  --primary-100: #c8e6c9;
  --primary-200: #a5d6a7;
  --primary-300: #81c784;
  --primary-400: #66bb6a;
  --primary-500: #4caf50;
  --primary-600: #43a047;
  --primary-700: #388e3c;
  --primary-800: #2e7d32;
  --primary-900: #1b5e20;

  /* 中性色 - 现代化灰色系统 */
  --neutral-0: #ffffff;
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #eeeeee;
  --neutral-300: #e0e0e0;
  --neutral-400: #bdbdbd;
  --neutral-500: #9e9e9e;
  --neutral-600: #757575;
  --neutral-700: #616161;
  --neutral-800: #424242;
  --neutral-900: #212121;

  /* 语义化颜色 */
  --success: #4caf50;
  --warning: #ff9800;
  --error: #f44336;
  --info: #2196f3;

  /* 背景色 */
  --bg-primary: #ffffff;
  --bg-secondary: #fafafa;
  --bg-tertiary: #f5f5f5;
  --bg-overlay: rgba(0, 0, 0, 0.5);

  /* 文字颜色 */
  --text-primary: #212121;
  --text-secondary: #757575;
  --text-tertiary: #bdbdbd;
  --text-inverse: #ffffff;

  /* 边框颜色 */
  --border-light: #f0f0f0;
  --border-medium: #e0e0e0;
  --border-dark: #d0d0d0;
}

/* ===== 字体系统 ===== */
.text-display {
  font-size: 48rpx;
  font-weight: 700;
  line-height: 1.2;
}

.text-headline {
  font-size: 40rpx;
  font-weight: 600;
  line-height: 1.3;
}

.text-title {
  font-size: 36rpx;
  font-weight: 600;
  line-height: 1.4;
}

.text-subtitle {
  font-size: 32rpx;
  font-weight: 500;
  line-height: 1.4;
}

.text-body {
  font-size: 28rpx;
  font-weight: 400;
  line-height: 1.5;
}

.text-caption {
  font-size: 24rpx;
  font-weight: 400;
  line-height: 1.4;
}

.text-label {
  font-size: 22rpx;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.5rpx;
}

/* ===== 间距系统 ===== */
.p-xs { padding: 8rpx; }
.p-sm { padding: 16rpx; }
.p-md { padding: 24rpx; }
.p-lg { padding: 32rpx; }
.p-xl { padding: 48rpx; }

.px-xs { padding-left: 8rpx; padding-right: 8rpx; }
.px-sm { padding-left: 16rpx; padding-right: 16rpx; }
.px-md { padding-left: 24rpx; padding-right: 24rpx; }
.px-lg { padding-left: 32rpx; padding-right: 32rpx; }
.px-xl { padding-left: 48rpx; padding-right: 48rpx; }

.py-xs { padding-top: 8rpx; padding-bottom: 8rpx; }
.py-sm { padding-top: 16rpx; padding-bottom: 16rpx; }
.py-md { padding-top: 24rpx; padding-bottom: 24rpx; }
.py-lg { padding-top: 32rpx; padding-bottom: 32rpx; }
.py-xl { padding-top: 48rpx; padding-bottom: 48rpx; }

.m-xs { margin: 8rpx; }
.m-sm { margin: 16rpx; }
.m-md { margin: 24rpx; }
.m-lg { margin: 32rpx; }
.m-xl { margin: 48rpx; }

.mx-xs { margin-left: 8rpx; margin-right: 8rpx; }
.mx-sm { margin-left: 16rpx; margin-right: 16rpx; }
.mx-md { margin-left: 24rpx; margin-right: 24rpx; }
.mx-lg { margin-left: 32rpx; margin-right: 32rpx; }
.mx-xl { margin-left: 48rpx; margin-right: 48rpx; }

.my-xs { margin-top: 8rpx; margin-bottom: 8rpx; }
.my-sm { margin-top: 16rpx; margin-bottom: 16rpx; }
.my-md { margin-top: 24rpx; margin-bottom: 24rpx; }
.my-lg { margin-top: 32rpx; margin-bottom: 32rpx; }
.my-xl { margin-top: 48rpx; margin-bottom: 48rpx; }

/* ===== 圆角系统 ===== */
.rounded-none { border-radius: 0; }
.rounded-xs { border-radius: 4rpx; }
.rounded-sm { border-radius: 8rpx; }
.rounded-md { border-radius: 12rpx; }
.rounded-lg { border-radius: 16rpx; }
.rounded-xl { border-radius: 24rpx; }
.rounded-full { border-radius: 50%; }

/* ===== 阴影系统 ===== */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); }
.shadow-md { box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); }
.shadow-lg { box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12); }
.shadow-xl { box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.16); }

/* ===== 布局系统 ===== */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }

.flex-1 { flex: 1; }
.flex-none { flex: none; }

/* ===== 定位系统 ===== */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

/* ===== 宽高系统 ===== */
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-screen { width: 100vw; }
.h-screen { height: 100vh; }

/* ===== 透明度系统 ===== */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ===== 过渡动画系统 ===== */
.transition-all { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-opacity { transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-transform { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

/* ===== 变换系统 ===== */
.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }

.translate-y-full { transform: translateY(100%); }
.translate-y-0 { transform: translateY(0); }

/* ===== 安全区域适配 ===== */
.safe-area-top {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

.safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-left {
  padding-left: constant(safe-area-inset-left);
  padding-left: env(safe-area-inset-left);
}

.safe-area-right {
  padding-right: constant(safe-area-inset-right);
  padding-right: env(safe-area-inset-right);
}

/* ===== 触摸友好 ===== */
.touch-target {
  min-height: 88rpx; /* 44px */
  min-width: 88rpx;
}

/* ===== 文字颜色工具类 ===== */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-inverse { color: var(--text-inverse); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }
.text-info { color: var(--info); }

/* ===== 背景颜色工具类 ===== */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }
.bg-success { background-color: var(--success); }
.bg-warning { background-color: var(--warning); }
.bg-error { background-color: var(--error); }
.bg-info { background-color: var(--info); }

/* ===== 边框工具类 ===== */
.border { border: 1rpx solid var(--border-medium); }
.border-light { border: 1rpx solid var(--border-light); }
.border-dark { border: 1rpx solid var(--border-dark); }
.border-t { border-top: 1rpx solid var(--border-medium); }
.border-b { border-bottom: 1rpx solid var(--border-medium); }
.border-l { border-left: 1rpx solid var(--border-medium); }
.border-r { border-right: 1rpx solid var(--border-medium); }