/**
 * qy591.com 设计系统
 * 统一的配色、间距、字体、组件样式
 */

/* ===== CSS 变量 ===== */
:root {
  /* 主色调 - 橙色系（省钱优选） */
  --color-primary: #FF6B35;
  --color-primary-dark: #E55A2B;
  --color-primary-light: #FF8C61;
  --color-primary-100: rgba(255, 107, 53, 0.1);
  --color-primary-200: rgba(255, 107, 53, 0.2);
  
  /* 功能色 */
  --color-danger: #E74C3C;
  --color-success: #27AE60;
  --color-warning: #F39C12;
  --color-info: #3498DB;
  
  /* 文字颜色 */
  --text-primary: #2C3E50;
  --text-secondary: #5D6D7E;
  --text-muted: #95A5A6;
  --text-light: #BDC3C7;
  
  /* 背景颜色 */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8F9FA;
  --bg-tertiary: #F1F3F4;
  --bg-card: #FFFFFF;
  --bg-hover: #F5F7FA;
  
  /* 边框颜色 */
  --border-color: #E8ECEF;
  --border-color-light: #F0F2F4;
  
  /* 阴影 */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  
  /* 圆角 */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  /* 间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  
  /* 字体 */
  --font-sans: -apple-system, BlinkMacSystemFont, " Segoe UI\, \PingFang SC\, \Hiragino Sans GB\, \Microsoft YaHei\, \Helvetica Neue\, Helvetica, Arial, sans-serif;
 --font-size-xs: 11px;
 --font-size-sm: 13px;
 --font-size-base: 15px;
 --font-size-lg: 18px;
 --font-size-xl: 24px;
 --font-size-2xl: 32px;
 
 /* 行高 */
 --line-height-tight: 1.25;
 --line-height-normal: 1.5;
 --line-height-relaxed: 1.75;
 
 /* 过渡 */
 --transition-fast: 0.15s ease;
 --transition-normal: 0.25s ease;
 --transition-slow: 0.35s ease;
}

/* ===== 暗色主题 ===== */
[data-theme=\dark\] {
 --text-primary: #E8ECEF;
 --text-secondary: #AEB6BF;
 --text-muted: #7F8C8D;
 --text-light: #5D6D7E;
 
 --bg-primary: #1A1D21;
 --bg-secondary: #22262B;
 --bg-tertiary: #2C3035;
 --bg-card: #2C3035;
 --bg-hover: #363A40;
 
 --border-color: #3A3F45;
 --border-color-light: #2E3338;
 
 --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
 --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
 --shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
}

/* ===== 基础样式重置 ===== */
*, *::before, *::after {
 box-sizing: border-box;
}

html {
 font-size: 16px;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

body {
 font-family: var(--font-sans);
 font-size: var(--font-size-base);
 line-height: var(--line-height-normal);
 color: var(--text-primary);
 background: var(--bg-secondary);
 margin: 0;
 padding: 0;
}

a {
 color: var(--color-primary);
 text-decoration: none;
 transition: color var(--transition-fast);
}

a:hover {
 color: var(--color-primary-dark);
}

/* ===== 容器 ===== */
.container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 var(--spacing-md);
}

/* ===== 卡片组件 ===== */
.card {
 background: var(--bg-card);
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-sm);
 border: 1px solid var(--border-color-light);
 transition: all var(--transition-normal);
}

.card:hover {
 box-shadow: var(--shadow-md);
 transform: translateY(-2px);
}

.card-header {
 padding: var(--spacing-md);
 border-bottom: 1px solid var(--border-color-light);
}

.card-body {
 padding: var(--spacing-md);
}

.card-footer {
 padding: var(--spacing-md);
 border-top: 1px solid var(--border-color-light);
}

/* ===== 按钮组件 ===== */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: var(--spacing-xs);
 padding: var(--spacing-sm) var(--spacing-md);
 font-size: var(--font-size-sm);
 font-weight: 500;
 line-height: 1;
 border-radius: var(--radius-sm);
 border: none;
 cursor: pointer;
 transition: all var(--transition-fast);
}

.btn-primary {
 background: var(--color-primary);
 color: #fff;
}

.btn-primary:hover {
 background: var(--color-primary-dark);
 color: #fff;
}

.btn-outline {
 background: transparent;
 color: var(--color-primary);
 border: 1px solid var(--color-primary);
}

.btn-outline:hover {
 background: var(--color-primary);
 color: #fff;
}

.btn-ghost {
 background: transparent;
 color: var(--text-secondary);
}

.btn-ghost:hover {
 background: var(--bg-tertiary);
 color: var(--text-primary);
}

/* ===== 标签组件 ===== */
.tag {
 display: inline-flex;
 align-items: center;
 padding: 2px 10px;
 font-size: var(--font-size-xs);
 font-weight: 500;
 border-radius: var(--radius-full);
 transition: all var(--transition-fast);
}

.tag-primary {
 color: var(--color-primary);
 background: var(--color-primary-100);
}

.tag-danger {
 color: var(--color-danger);
 background: rgba(231, 76, 60, 0.1);
}

.tag-success {
 color: var(--color-success);
 background: rgba(39, 174, 96, 0.1);
}

/* ===== 价格样式 ===== */
.price {
 color: var(--color-danger);
 font-weight: 700;
}

.price-large {
 font-size: 20px;
}

.price-small {
 font-size: var(--font-size-sm);
}

.price-original {
 color: var(--text-muted);
 text-decoration: line-through;
 font-size: var(--font-size-sm);
}

/* ===== 优惠券标签 ===== */
.coupon-tag {
 display: inline-flex;
 align-items: center;
 padding: 2px 8px;
 font-size: var(--font-size-xs);
 font-weight: 600;
 color: var(--color-danger);
 background: linear-gradient(135deg, #FFF5F2, #FFE8E0);
 border: 1px dashed #FFB8A8;
 border-radius: 4px;
}

/* ===== 徽章 ===== */
.badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 18px;
 height: 18px;
 padding: 0 6px;
 font-size: 10px;
 font-weight: 600;
 color: #fff;
 background: var(--color-danger);
 border-radius: var(--radius-full);
}

/* ===== 分隔线 ===== */
.divider {
 height: 1px;
 background: var(--border-color-light);
 margin: var(--spacing-md) 0;
}

.divider-dashed {
 border: none;
 border-top: 1px dashed var(--border-color);
 background: transparent;
}

/* ===== 空状态 ===== */
.empty-state {
 text-align: center;
 padding: var(--spacing-2xl);
 color: var(--text-muted);
}

.empty-state i {
 font-size: 48px;
 margin-bottom: var(--spacing-md);
 color: var(--text-light);
}

/* ===== 加载状态 ===== */
.loading {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: var(--spacing-sm);
 padding: var(--spacing-xl);
 color: var(--text-muted);
}

.loading i {
 animation: spin 1s linear infinite;
}

@keyframes spin {
 from { transform: rotate(0deg); }
 to { transform: rotate(360deg); }
}

/* ===== 文字截断 ===== */
.text-truncate {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

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

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

/* ===== 工具类 ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }

.bg-primary { background: var(--bg-primary); }
.bg-secondary { background: var(--bg-secondary); }
.bg-tertiary { background: var(--bg-tertiary); }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ===== 响应式 ===== */
@media (max-width: 768px) {
 :root {
 --font-size-base: 14px;
 --spacing-md: 12px;
 --spacing-lg: 20px;
 }
}