/* 常量样式 */

/* 主题色 */
:root {
  --primary-color: #1677FF;
  --primary-hover: #0e66e0;
  --secondary-color: #f0f0f0;
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-light: #999999;
  --background-light: #f7f7f7;
  --border-color: #e0e0e0;
  --success-color: #07c160;
  --warning-color: #ff9500;
  --error-color: #dd524d;
}

/* 字体大小 */
.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 1rpx 2rpx rgba(0, 0, 0, 0.05);
}

.shadow-md {
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.shadow-lg {
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.15);
}

/* 动画 */
.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;
  }
}