@import '@/uni.scss';

@mixin glass-panel($opacity: 0.88) {
  background: rgba(253, 255, 252, $opacity);
  border: 1rpx solid rgba(255, 255, 255, 0.8);
  border-radius: $radius-card;
  box-shadow: $shadow-card;
}

@mixin outlined-card($opacity: 0.88) {
  @include glass-panel($opacity);
  border-color: rgba(210, 191, 156, 0.16);
}

@mixin section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

@mixin primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 92rpx;
  padding: 0 38rpx;
  border-radius: $radius-button;
  color: #fff;
  font-size: 28rpx;
  font-weight: 600;
  letter-spacing: 3rpx;
  background: $brand-primary-deep;
  border: 1rpx solid rgba(210, 191, 156, 0.26);
  box-shadow: 0 22rpx 48rpx rgba(36, 74, 61, 0.18);
}

@mixin secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 84rpx;
  padding: 0 30rpx;
  border-radius: 42rpx;
  color: $brand-primary-deep;
  font-size: 26rpx;
  font-weight: 600;
  letter-spacing: 2rpx;
  background: rgba(255, 255, 255, 0.9);
  border: 1rpx solid rgba(210, 191, 156, 0.22);
  box-shadow: 0 14rpx 30rpx rgba(54, 77, 64, 0.08);
}

@mixin capsule($bg: rgba(255, 255, 255, 0.74), $color: $text-secondary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx 20rpx;
  border-radius: $radius-chip;
  background: $bg;
  color: $color;
  font-size: 22rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.2);
  box-shadow: $shadow-chip;
}

@mixin chip-soft {
  @include capsule(rgba(210, 191, 156, 0.16), $brand-primary-deep);
  border-color: rgba(210, 191, 156, 0.14);
}

@mixin chip-status {
  @include capsule(rgba(210, 191, 156, 0.18), $brand-primary-deep);
  border-color: rgba(210, 191, 156, 0.14);
}

@mixin chip-rose {
  @include capsule(rgba(182, 142, 154, 0.16), $brand-primary-deep);
  border-color: rgba(182, 142, 154, 0.14);
}

@mixin chip-inverse {
  @include capsule(rgba(255, 255, 255, 0.2), #fff);
  border-color: rgba(255, 255, 255, 0.22);
}

@mixin selection-chip {
  border-radius: 24rpx;
  background: rgba(255, 255, 255, 0.82);
  border: 1rpx solid rgba(210, 191, 156, 0.16);
  box-shadow: $shadow-soft;
}

@mixin selection-chip-active {
  color: #fff;
  background: $brand-primary-deep;
  border: 1rpx solid rgba(210, 191, 156, 0.24);
  box-shadow: 0 18rpx 40rpx rgba(100, 140, 118, 0.22);
}