/* 常量样式 - 深色主题 */

/* 主题色 - 深色 */
:root {
  --primary-color: #1677FF;
  --primary-hover: #0e66e0;
  --secondary-color: #2a2a2a;
  --text-primary: #ffffff;
  --text-secondary: #aaaaaa;
  --text-light: #666666;
  --background-light: #1a1a1a;
  --border-color: #252525;
  --success-color: #52c41a;
  --warning-color: #faad14;
  --error-color: #ff4d4f;
}

/* 字体大小 */
.font-xs {
  font-size: 20rpx;
}

.font-sm {
  font-size: 24rpx;
}

.font-base {
  font-size: 28rpx;
}

.font-lg {
  font-size: 32rpx;
}

.font-xl {
  font-size: 36rpx;
}

/* 间距 */
.mt-1 { margin-top: 10rpx; }
.mt-2 { margin-top: 20rpx; }
.mt-3 { margin-top: 30rpx; }

.mb-1 { margin-bottom: 10rpx; }
.mb-2 { margin-bottom: 20rpx; }
.mb-3 { margin-bottom: 30rpx; }

.ml-1 { margin-left: 10rpx; }
.ml-2 { margin-left: 20rpx; }

.mr-1 { margin-right: 10rpx; }
.mr-2 { margin-right: 20rpx; }

/* 圆角 - 深色适配 */
.rounded-sm { border-radius: 8rpx; }
.rounded-md { border-radius: 12rpx; }
.rounded-lg { border-radius: 16rpx; }
.rounded-full { border-radius: 9999rpx; }

/* 阴影 - 深色适配 */
.shadow-sm { box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.3); }
.shadow-md { box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.35); }
.shadow-lg { box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.45); }

/* 动画 */
.fade-in { animation: fadeIn 0.3s ease-in-out; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.slide-up { animation: slideUp 0.3s ease-out; }

@keyframes slideUp {
  from { transform: translateY(20rpx); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}