/* 全局公共样式 */

/* ========================================
   引入新设计系统 - 橙蓝双色系统
   ======================================== */
@import './design-tokens.scss';
@import './mixins.scss';

/* ========================================
   向后兼容：保留旧变量名映射到新设计系统
   注意：新代码请使用 design-tokens.scss 中的变量
   ======================================== */

// 旧的主色系变量（映射到新的辅助色 - 蓝色）
// 注意：实际页面中大量使用橙色，新代码请使用 $primary-color（橙色）
$old-primary-color: $secondary-color; // 保留旧的蓝色作为辅助色
$old-primary-light: $secondary-400;
$old-primary-lighter: $secondary-200;
$old-primary-dark: $secondary-700;
$old-primary-bg: $secondary-50;

// 主色系的深浅变体（用于按钮激活态等）
$primary-light: $primary-400;
$primary-dark: $primary-700;
$primary-bg: $primary-50;

// 注意：以上变量已在 design-tokens.scss 中重新定义
// 功能色、中性色、背景色、边框色、阴影、圆角、间距、字体等
// 都已在新设计系统中定义，此处不再重复定义

/* ========================================
   兼容旧变量名（逐步废弃）
   ======================================== */
$text-color: $text-primary;
$text-color-secondary: $text-secondary;
$text-color-light: $text-tertiary;
$text-color-placeholder: $text-placeholder;
$border-color: $border-base;
$border-color-light: $border-light;
$bg-color: $bg-page;
$bg-color-white: $bg-card;
$bg-color-card: $bg-card;

/* 页面基础样式 */
page {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
    'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  font-size: $font-base;
  color: $text-primary;
  background-color: $bg-page;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 页面容器 */
.page-container {
  min-height: 100vh;
  background: $bg-page;
}

/* 卡片样式 - 扁平化设计 */
.card {
  background: $bg-card;
  border-radius: $radius-lg;
  padding: $spacing-xl;
  margin-bottom: $spacing-md;
  border: 1rpx solid $border-light;
  transition: all 0.2s ease;
}

.card:active {
  background: $bg-hover;
}

.card-large {
  border-radius: $radius-xl;
  padding: $spacing-2xl;
}

.card-flat {
  box-shadow: none;
  border: 1rpx solid $border-light;
}

.card-gradient {
  background: linear-gradient(135deg, $primary-color, $primary-400);
  color: #FFFFFF;
  border: none;
}

/* 常用 flex 布局 */
.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

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

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

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

.flex-wrap {
  flex-wrap: wrap;
}

.flex-1 {
  flex: 1;
}

/* 文本样式 */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

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

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

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

/* 文字颜色 */
.text-primary {
  color: $primary-color;
}

.text-success {
  color: $success-color;
}

.text-warning {
  color: $warning-color;
}

.text-error {
  color: $error-color;
}

.text-secondary {
  color: $text-color-secondary;
}

.text-light {
  color: $text-color-light;
}

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

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

.text-md {
  font-size: 28rpx;
}

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

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

.text-2xl {
  font-size: 40rpx;
}

/* 字体粗细 */
.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

/* 间距 */
.mt-8 { margin-top: 8rpx; }
.mt-16 { margin-top: 16rpx; }
.mt-24 { margin-top: 24rpx; }
.mt-32 { margin-top: 32rpx; }

.mb-8 { margin-bottom: 8rpx; }
.mb-16 { margin-bottom: 16rpx; }
.mb-24 { margin-bottom: 24rpx; }
.mb-32 { margin-bottom: 32rpx; }

.ml-8 { margin-left: 8rpx; }
.ml-16 { margin-left: 16rpx; }
.ml-24 { margin-left: 24rpx; }

.mr-8 { margin-right: 8rpx; }
.mr-16 { margin-right: 16rpx; }
.mr-24 { margin-right: 24rpx; }

.p-16 { padding: 16rpx; }
.p-24 { padding: 24rpx; }
.p-32 { padding: 32rpx; }

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

.divider-light {
  height: 1rpx;
  background: $border-color-light;
  margin: 16rpx 0;
}

/* 标签样式 */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6rpx $spacing-sm;
  font-size: $font-xs;
  border-radius: $radius-xs;
  background: rgba($primary-color, 0.1);
  color: $primary-color;
}

.tag-success {
  background: rgba($success-color, 0.1);
  color: $success-color;
}

.tag-warning {
  background: rgba($warning-color, 0.1);
  color: $warning-color;
}

.tag-error {
  background: rgba($error-color, 0.1);
  color: $error-color;
}

.tag-info {
  background: rgba($info-color, 0.1);
  color: $info-color;
}

/* 按钮样式 - 扁平化设计 */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88rpx;
  padding: 0 $spacing-2xl;
  border-radius: $radius-base;
  font-size: $font-base;
  font-weight: $font-medium;
  border: none;
  transition: all 0.2s ease;
}

.btn-primary {
  background: $primary-color;
  color: #FFFFFF;
}

.btn-primary:active {
  background: $primary-700;
}

.btn-secondary {
  background: $primary-50;
  color: $primary-color;
}

.btn-secondary:active {
  background: $primary-100;
}

.btn-outline {
  background: transparent;
  color: $primary-color;
  border: 2rpx solid $primary-color;
}

.btn-outline:active {
  background: $primary-50;
}

.btn-text {
  height: auto;
  padding: $spacing-sm $spacing-md;
  background: transparent;
  font-size: $font-base;
  font-weight: $font-medium;
  color: $primary-color;
}

.btn-text:active {
  opacity: 0.6;
}

.btn-mini {
  height: 64rpx;
  padding: 0 $spacing-lg;
  font-size: $font-sm;
}

.btn-danger {
  background: transparent;
  color: $error-color;
  border: 2rpx solid $error-color;
}

.btn-danger:active {
  background: rgba($error-color, 0.05);
}

.btn-disabled {
  background: $bg-disabled;
  color: $text-disabled;
  opacity: 0.6;
}

/* 输入框样式 */
.input {
  height: 88rpx;
  background: $bg-page;
  border: 2rpx solid transparent;
  border-radius: $radius-round;
  padding: 0 $spacing-md;
  font-size: $font-base;
  color: $text-primary;
  transition: all 0.2s ease;
}

.input:focus {
  border-color: $primary-color;
  background: #FFFFFF;
  box-shadow: 0 0 0 4rpx rgba(0, 134, 246, 0.1);
}

.input::placeholder {
  color: $text-placeholder;
}

.input-square {
  border-radius: $radius-sm;
}

.input-underline {
  height: 80rpx;
  padding: 0;
  background: transparent;
  border: none;
  border-bottom: 2rpx solid $border-base;
  border-radius: 0;
}

.input-underline:focus {
  border-bottom-color: $primary-color;
  box-shadow: none;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 48rpx;
}

.empty-icon {
  font-size: 120rpx;
  color: #ddd;
  margin-bottom: 24rpx;
}

.empty-text {
  font-size: 28rpx;
  color: $text-color-light;
}

/* 加载状态 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 0;
}

.loading-text {
  font-size: 26rpx;
  color: $text-color-light;
  margin-top: 16rpx;
}

/* 安全区域 */
.safe-area-bottom {
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
}

/* 动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

.animate-fade-in {
  animation: fadeIn 0.3s ease;
}

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

/* 价格样式 */
.price {
  color: $primary-color;
  font-weight: 700;
}

.price-symbol {
  font-size: 24rpx;
}

.price-value {
  font-size: 40rpx;
}

.price-unit {
  font-size: 22rpx;
  color: $text-color-light;
}

/* 评分星星 */
.rating-stars {
  display: flex;
  gap: 2rpx;
}

.star {
  font-size: 28rpx;
  color: #E5E5E5;
}

.star-filled {
  color: $star-color;
}

/* 骨架屏占位 */
.skeleton {
  background: linear-gradient(90deg, #f5f5f5 25%, #e8e8e8 50%, #f5f5f5 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 8rpx;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 列表项样式 */
.list-item {
  display: flex;
  align-items: center;
  padding: $spacing-md;
  background: #FFFFFF;
  border-bottom: 1rpx solid $border-light;
  transition: background 0.2s ease;
}

.list-item:last-child {
  border-bottom: none;
}

.list-item:active {
  background: $bg-hover;
}

/* 渐变背景 */
.gradient-primary {
  background: linear-gradient(135deg, $primary-color, $primary-400);
}

.gradient-primary-reverse {
  background: linear-gradient(135deg, $primary-400, $primary-color);
}

/* 阴影卡片效果 */
.elevated-card {
  background: #FFFFFF;
  border-radius: $radius-lg;
  padding: $spacing-md;
  box-shadow: $shadow-md;
  margin: $spacing-md;
}

/* 图标按钮 */
.icon-btn {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
}

.icon-btn:active {
  background: rgba(0, 0, 0, 0.08);
}
