/**
 * 柯大鸭潮玩 - 全局样式系统
 * 
 * 基于潮玩盲盒风格的设计系统，采用暖橙渐变色调
 * 传递惊喜、期待、活力的品牌调性
 */

/* ============================================
   🎨 品牌色彩系统 - 潮玩盲盒 Pro (2025 Refined)
   ============================================ */

/* 主色调 - 更加活力与现代 */
$brand-primary: #FF6B00; // 核心品牌橙 (更纯粹)
$brand-secondary: #FF9500; // 次级品牌色 (用于渐变/辅助)
$brand-primary-light: #FF9500; // 亮橙
$brand-primary-dark: #E65100; // 深橙

/* 辅助色 - 丰富视觉层次 */
$accent-gold: #FFC107; // 质感金
$accent-orange: #FF9500; // 活力橙
$accent-red: #FF3B30; // 促销红
$accent-blue: #007AFF; // 科技蓝
$accent-purple: #AF52DE; // 梦幻紫
$accent-pink: #FF2D55; // 活力粉
$accent-cyan: #5AC8FA; // 清新蓝
$color-success: #34C759; // 成功色
$color-warning: #FF9F0A; // 警告色
$color-error: #FF3B30; // 错误色

/* 中性色 - 提升阅读体验 */
$text-main: #1D1D1F; // 主要文字 (接近纯黑但柔和)
$text-sub: #86868B; // 次要文字
$text-secondary: $text-sub; // Alias for compatibility
$text-tertiary: #C7C7CC; // 辅助/占位
$text-placeholder: $text-tertiary; // Alias for compatibility
$text-disabled: #D1D1D6; // 禁用状态文字
$text-inverse: #FFFFFF; // 反白文字

/* 背景色 - 营造氛围 */
$bg-page: #F5F5F7; // 页面底色 (高级灰)
$bg-card: #FFFFFF; // 卡片背景
$bg-glass: rgba(255, 255, 255, 0.8); // 毛玻璃背景
$bg-secondary: #F8F8F8; // 次级背景
$bg-grey: #FAFAFA; // 浅灰背景

/* 渐变色 - 视觉冲击力 */
// 使用 CSS 变量在 style 中定义，此处保留 SCSS 变量供编译使用
$gradient-brand: linear-gradient(135deg, #FF9500 0%, #FF5E00 100%);
$gradient-gold: linear-gradient(135deg, #FFD60A 0%, #FF9F0A 100%);
$gradient-red: linear-gradient(135deg, #FF3B30 0%, #D32F2F 100%);
$gradient-purple: linear-gradient(135deg, #BF5AF2 0%, #5E5CE6 100%);

/* ============================================
   🌑 暗黑/特殊主题变量 (Dark Mode Support)
   ============================================ */
$bg-dark: #1A1A2E; // 深邃蓝黑
$bg-dark-card: rgba(30, 30, 50, 0.7); // 暗色玻璃卡片
$text-dark-main: #FFFFFF; // 暗色模式主字
$text-dark-sub: rgba(255, 255, 255, 0.7); // 暗色模式副字
$border-dark: rgba(255, 255, 255, 0.1); // 暗色边框


/* ============================================
   📐 布局与间距
   ============================================ */
$font-xxs: 18rpx;
$font-xs: 22rpx;
$font-sm: 24rpx;
$font-md: 28rpx;
$font-lg: 32rpx;
$font-xl: 36rpx;
$font-xxl: 48rpx;

$spacing-xs: 8rpx;
$spacing-sm: 12rpx;
$spacing-md: 16rpx;
$spacing-lg: 24rpx;
$spacing-xl: 32rpx;
$spacing-xxl: 48rpx;

$radius-sm: 8rpx;
$radius-md: 16rpx;
$radius-lg: 24rpx;
$radius-xl: 32rpx;
$radius-round: 999rpx;

$border-color-light: #F0F0F0;
$border-color: $border-color-light;


/* ============================================
   ✨ 阴影与质感
   ============================================ */
$shadow-xs: 0 1rpx 4rpx rgba(0, 0, 0, 0.02);
$shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
$shadow-md: 0 6rpx 16rpx rgba(0, 0, 0, 0.08);
$shadow-card: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
$shadow-float: 0 16rpx 48rpx rgba(255, 107, 0, 0.15); // 悬浮投影
$shadow-inner: inset 0 2rpx 6rpx rgba(0, 0, 0, 0.04);
$shadow-lg: 0 16rpx 48rpx rgba(0, 0, 0, 0.12);
$shadow-warm: 0 8rpx 24rpx rgba(255, 107, 53, 0.15);
$shadow-glow: 0 4rpx 16rpx rgba(255, 159, 67, 0.4);

/* ============================================
   🔄 动画时长
   ============================================ */

$transition-fast: 0.15s;
$transition-normal: 0.25s;
$transition-slow: 0.35s;
$ease-out: cubic-bezier(0.4, 0, 0.2, 1);
$ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

/* ============================================
   📱 兼容uni-app官方变量
   ============================================ */

/* 行为相关颜色 - 使用新配色 */
$uni-color-primary: $brand-primary;
$uni-color-success: #10B981;
$uni-color-warning: $accent-gold;
$uni-color-error: $accent-red;

/* 文字基本颜色 */
$uni-text-color: $text-main;
$uni-text-color-inverse: $text-inverse;
$uni-text-color-grey: $text-tertiary;
$uni-text-color-placeholder: $text-tertiary;
$uni-text-color-disable: #D1D5DB;

/* 背景颜色 */
$uni-bg-color: $bg-card;
$uni-bg-color-grey: $bg-page;
$uni-bg-color-hover: #FFF0E6;
$uni-bg-color-mask: rgba(0, 0, 0, 0.5);

/* 边框颜色 */
$uni-border-color: #E5E7EB;

/* 尺寸变量 */
$uni-font-size-sm: 12px;
$uni-font-size-base: 14px;
$uni-font-size-lg: 16px;

$uni-img-size-sm: 20px;
$uni-img-size-base: 26px;
$uni-img-size-lg: 40px;

/* Border Radius */
$uni-border-radius-sm: 4px;
$uni-border-radius-base: 8px;
$uni-border-radius-lg: 12px;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 6px;
$uni-spacing-row-base: 12px;
$uni-spacing-row-lg: 16px;

/* 垂直间距 */
$uni-spacing-col-sm: 6px;
$uni-spacing-col-base: 10px;
$uni-spacing-col-lg: 14px;

/* 透明度 */
$uni-opacity-disabled: 0.4;

/* 文章场景相关 */
$uni-color-title: $text-main;
$uni-font-size-title: 20px;
$uni-color-subtitle: $text-sub;
$uni-font-size-subtitle: 16px;
$uni-color-paragraph: $text-sub;
$uni-font-size-paragraph: 15px;

/* ============================================
   🛠 工具 Mixins
   ============================================ */

@mixin text-ellipsis($lines: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
}

/* ============================================
   💎 核心公共 UI 类 (Premium UI 6.0)
   ============================================ */

/* 1. 统一背景装饰 - 漂浮光球 */
.bg-decoration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -100rpx;
    right: -100rpx;
    width: 600rpx;
    height: 600rpx;
    background: radial-gradient(circle, rgba($brand-primary, 0.15) 0%, transparent 70%);
    filter: blur(60rpx);
    border-radius: 50%;
    opacity: 0.8;
    animation: float 10s ease-in-out infinite;
  }

  &::after {
    content: '';
    position: absolute;
    top: 200rpx;
    left: -200rpx;
    width: 500rpx;
    height: 500rpx;
    background: radial-gradient(circle, rgba($brand-secondary, 0.1) 0%, transparent 70%);
    filter: blur(50rpx);
    border-radius: 50%;
    opacity: 0.6;
    animation: float 15s ease-in-out infinite reverse;
  }
}

/* 2. 毛玻璃卡片基类 */
.glass-card {
  background: $bg-glass;
  backdrop-filter: blur(20rpx);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: $shadow-card;
  border-radius: $radius-lg;
  position: relative;
  z-index: 1;
}

/* 3. 通用功能按钮 */
.btn-primary {
  background: $gradient-brand;
  color: #fff;
  font-weight: 700;
  border-radius: $radius-round;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: $shadow-warm;
  transition: all 0.2s $ease-out;

  &:active {
    transform: scale(0.96);
    opacity: 0.9;
  }
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.9);
  color: $text-main;
  font-weight: 600;
  border-radius: $radius-round;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: $shadow-sm;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.2s $ease-out;

  &:active {
    transform: scale(0.96);
    background: #fff;
  }
}