// 全局样式
* {
  box-sizing: border-box;
}

page {
  background-color: #f8f8f8;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

// 通用按钮样式
button {
  border: none;
  outline: none;
  
  &::after {
    border: none;
  }
}

// 图标字体（暂时注释，如需使用请添加字体文件）
// @font-face {
//   font-family: 'iconfont';
//   src: url('/static/fonts/iconfont.ttf') format('truetype');
// }

// .iconfont {
//   font-family: 'iconfont' !important;
//   font-style: normal;
//   -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale;
// }

// 通用类
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

// 颜色变量 - 薄荷绿主题（参考习正小程序）
$primary-color: #7dd3c0;        // 薄荷绿主色
$primary-light: #a8e6d7;        // 浅薄荷绿
$primary-dark: #5cb8a3;         // 深薄荷绿
$secondary-color: #ff6b9d;      // 粉红色强调色
$accent-color: #ffd93d;         // 黄色点缀
$success-color: #52c41a;
$warning-color: #faad14;
$error-color: #ff4d4f;
$text-color: #333;
$text-secondary: #666;
$text-placeholder: #999;
$border-color: #eee;
$bg-color: #f0f9f7;             // 浅薄荷绿背景
$card-bg: #ffffff;

// 卡片样式
.card {
  background: $card-bg;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

// 按钮样式
.btn-primary {
  background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%);
  color: #fff;
  border-radius: 48rpx;
  padding: 24rpx 48rpx;
  font-size: 28rpx;
  text-align: center;
}

.btn-secondary {
  background: linear-gradient(135deg, $secondary-color 0%, #ffb3c1 100%);
  color: #fff;
  border-radius: 48rpx;
  padding: 24rpx 48rpx;
  font-size: 28rpx;
  text-align: center;
}

// 标签样式
.tag {
  display: inline-block;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  font-size: 22rpx;
  
  &.tag-primary {
    background: rgba(125, 211, 192, 0.15);
    color: $primary-color;
  }
  
  &.tag-hot {
    background: linear-gradient(135deg, #ff6b9d 0%, #ff8fb3 100%);
    color: #fff;
  }
  
  &.tag-new {
    background: linear-gradient(135deg, #ffd93d 0%, #ffe066 100%);
    color: #333;
  }
}

// 价格样式
.price {
  color: $secondary-color;
  font-weight: bold;
  
  .symbol {
    font-size: 24rpx;
  }
  
  .amount {
    font-size: 36rpx;
  }
  
  .unit {
    font-size: 24rpx;
  }
}

// 渐变背景
.gradient-bg {
  background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%);
}

// 圆角图片
.round-image {
  border-radius: 16rpx;
  overflow: hidden;
}

// 分割线
.divider {
  height: 1rpx;
  background: $border-color;
  margin: 24rpx 0;
}

// 空状态图标
.empty-icon {
  font-size: 120rpx;
  display: block;
  margin-bottom: 20rpx;
}

.empty-image {
  width: 300rpx;
  height: 300rpx;
  margin-bottom: 20rpx;
}