/* 全局样式配置文件 */

/* ==================== 主题色系 ==================== */

/* 浅色主题 */
:root {
  --bg-primary: #f5f7fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #fafafa;
  --text-primary: #333333;
  --text-secondary: #888888;
  --text-tertiary: #999999;
  --border-color: #e0e0e0;
  --border-light: #f0f0f0;
  --shadow-color: rgba(0, 0, 0, 0.05);
  --shadow-strong: rgba(0, 0, 0, 0.1);
  --accent-color: #667eea;
  --accent-hover: #5568d3;
  --gradient-start: #f5f7fa;
  --gradient-end: #c3cfe2;
  --divider-color: #e0e0e0;
  --card-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  --card-border: 1rpx solid #e0e0e0;
  --radius-sm: 8rpx;
  --radius-md: 12rpx;
  --radius-lg: 16rpx;
  --radius-xl: 24rpx;
  --spacing-xs: 8rpx;
  --spacing-sm: 12rpx;
  --spacing-md: 16rpx;
  --spacing-lg: 20rpx;
  --spacing-xl: 24rpx;
  --spacing-xxl: 32rpx;
  --font-xs: 20rpx;
  --font-sm: 24rpx;
  --font-md: 28rpx;
  --font-lg: 32rpx;
  --font-xl: 36rpx;
  --font-xxl: 42rpx;
  --line-height-sm: 1.4;
  --line-height-md: 1.5;
  --line-height-lg: 1.6;
}

/* 深色主题 */
.theme-dark {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #3a3a3a;
  --text-primary: #ffffff;
  --text-secondary: #aaaaaa;
  --text-tertiary: #888888;
  --border-color: #404040;
  --border-light: #3a3a3a;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --shadow-strong: rgba(0, 0, 0, 0.5);
  --accent-color: #667eea;
  --accent-hover: #7a8fd8;
  --gradient-start: #1a1a1a;
  --gradient-end: #2d2d2d;
  --divider-color: #404040;
  --card-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
  --card-border: 1rpx solid #404040;
}

/* ==================== 响应式断点 ==================== */

/* 超小屏手机 */
@media screen and (max-width: 375rpx) {
  :root {
    --font-xs: 18rpx;
    --font-sm: 22rpx;
    --font-md: 26rpx;
    --font-lg: 30rpx;
    --spacing-xs: 6rpx;
    --spacing-sm: 10rpx;
    --spacing-md: 14rpx;
    --spacing-lg: 18rpx;
  }
}

/* 小屏手机 */
@media screen and (min-width: 376rpx) and (max-width: 480rpx) {
  :root {
    --font-xs: 20rpx;
    --font-sm: 24rpx;
    --font-md: 28rpx;
    --font-lg: 32rpx;
    --spacing-xs: 8rpx;
    --spacing-sm: 12rpx;
    --spacing-md: 16rpx;
    --spacing-lg: 20rpx;
  }
}

/* 中等屏幕手机 */
@media screen and (min-width: 481rpx) and (max-width: 600rpx) {
  :root {
    --font-xs: 22rpx;
    --font-sm: 26rpx;
    --font-md: 30rpx;
    --font-lg: 34rpx;
    --spacing-xs: 10rpx;
    --spacing-sm: 14rpx;
    --spacing-md: 18rpx;
    --spacing-lg: 22rpx;
  }
}

/* 大屏手机/平板 */
@media screen and (min-width: 601rpx) and (max-width: 750rpx) {
  :root {
    --font-xs: 24rpx;
    --font-sm: 28rpx;
    --font-md: 32rpx;
    --font-lg: 36rpx;
    --spacing-xs: 12rpx;
    --spacing-sm: 16rpx;
    --spacing-md: 20rpx;
    --spacing-lg: 24rpx;
  }
}

/* 超大屏/桌面 */
@media screen and (min-width: 751rpx) {
  :root {
    --font-xs: 26rpx;
    --font-sm: 30rpx;
    --font-md: 34rpx;
    --font-lg: 38rpx;
    --spacing-xs: 14rpx;
    --spacing-sm: 18rpx;
    --spacing-md: 22rpx;
    --spacing-lg: 26rpx;
  }
}

/* ==================== 通用工具类 ==================== */

/* 布局 */
.flex {
  display: flex;
}

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

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

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

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

.grid {
  display: grid;
}

/* 间距 */
.gap-xs {
  gap: var(--spacing-xs);
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

.padding-xs {
  padding: var(--spacing-xs);
}

.padding-sm {
  padding: var(--spacing-sm);
}

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

.padding-lg {
  padding: var(--spacing-lg);
}

.padding-xl {
  padding: var(--spacing-xl);
}

.margin-xs {
  margin: var(--spacing-xs);
}

.margin-sm {
  margin: var(--spacing-sm);
}

.margin-md {
  margin: var(--spacing-md);
}

.margin-lg {
  margin: var(--spacing-lg);
}

.margin-xl {
  margin: var(--spacing-xl);
}

/* 文本 */
.text-xs {
  font-size: var(--font-xs);
}

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

.text-md {
  font-size: var(--font-md);
}

.text-lg {
  font-size: var(--font-lg);
}

.text-xl {
  font-size: var(--font-xl);
}

.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-tertiary {
  color: var(--text-tertiary);
}

/* 卡片 */
.card {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  border: var(--card-border);
}

.card-hover {
  box-shadow: var(--shadow-strong);
  transform: translateY(-2rpx);
  transition: all 0.3s ease;
}

/* 按钮 */
.btn {
  background: var(--accent-color);
  color: #ffffff;
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-md);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-hover {
  background: var(--accent-hover);
  transform: translateY(-2rpx);
}

.btn-outline {
  background: transparent;
  color: var(--accent-color);
  border: 2rpx solid var(--accent-color);
}

.btn-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-sm);
}

.btn-lg {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-lg);
}

/* 输入框 */
.input {
  background: var(--bg-secondary);
  border: var(--card-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-md);
  color: var(--text-primary);
}

.input-focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 4rpx var(--shadow-color);
}

/* 分割线 */
.divider {
  height: 1rpx;
  background: var(--divider-color);
  margin: var(--spacing-md) 0;
}

.divider-vertical {
  width: 1rpx;
  background: var(--divider-color);
  margin: 0 var(--spacing-md);
}

/* 徽章 */
.badge {
  background: var(--accent-color);
  color: #ffffff;
  border-radius: var(--radius-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-xs);
}

/* 骨架 */
.skeleton {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
  border-radius: var(--radius-sm);
  animation: skeleton-loading 1.5s infinite;
}

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

/* 隐藏滚动条 */
::-webkit-scrollbar {
  width: 6rpx;
  height: 6rpx;
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3rpx;
}

/* 安全区域适配 */
.safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-top {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

/* 横屏适配 */
@media screen and (orientation: landscape) {
  .safe-area-bottom {
    padding-bottom: constant(safe-area-inset-left);
    padding-bottom: env(safe-area-inset-left);
  }
}