/**
 * 主样式文件
 * 统一管理所有样式，保持简洁清晰
 */

html,
body,
#app {
  height: 100%;
  padding: 0;
  margin: 0;
}

.app-container {
  padding: 16rpx;

  :deep(.custom-item) {
    height: 100px !important;
  }
  :deep(.wd-card) {
    margin: 16rpx 0 !important;
  }
}

/* ===== 全局主题变量 ===== */
:root {
  /* 主题色系 */
  --primary-color: #165dff;
  --primary-color-light: #94bfff;
  --primary-color-dark: #0e3c9b;
  --wot-color-theme: #165dff;

  /* 功能色系 */
  --success-color: #07c160;
  --warning-color: #ff7d00;
  --danger-color: #f53f3f;
  --info-color: #86909c;

  /* 文字颜色 */
  --text-color: #1d2129;
  --text-color-2: #4e5969;
  --text-color-3: #86909c;
  --text-color-placeholder: #c9cdd4;
  --text-color-inverse: #ffffff;

  /* 背景颜色 */
  --bg-color: #ffffff;
  --bg-color-2: #f8f8f8;
  --bg-color-3: #f2f3f5;
  --card-bg-color: #ffffff;

  /* 边框颜色 */
  --border-color: #e5e6eb;
  --border-color-light: #f2f3f5;

  /* 阴影 */
  --shadow-light: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  --shadow-medium: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  --shadow-heavy: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);

  /* 圆角 */
  --radius-sm: 4rpx;
  --radius-md: 8rpx;
  --radius-lg: 16rpx;
  --radius-xl: 24rpx;
  --radius-full: 9999rpx;

  /* 间距 */
  --spacing-xs: 8rpx;
  --spacing-sm: 16rpx;
  --spacing-md: 24rpx;
  --spacing-lg: 32rpx;
  --spacing-xl: 48rpx;
  --spacing-xxl: 64rpx;

  /* 字体大小 */
  --font-xs: 24rpx;
  --font-sm: 28rpx;
  --font-md: 32rpx;
  --font-lg: 36rpx;
  --font-xl: 40rpx;
  --font-xxl: 48rpx;
  --font-xxxl: 56rpx;

  /* 动画 */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ===== 暗黑模式变量 ===== */
.dark {
  --text-color: #ffffff;
  --text-color-2: #e0e0e0;
  --text-color-3: #a0a0a0;
  --text-color-placeholder: #606060;
  --text-color-inverse: #1d2129;

  --bg-color: #0f0f0f;
  --bg-color-2: #1a1a1a;
  --bg-color-3: #242424;
  --card-bg-color: #1a1a1a;

  --border-color: #2f2f2f;
  --border-color-light: #3d3d3d;

  --shadow-light: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 4rpx 16rpx rgba(0, 0, 0, 0.4);
  --shadow-heavy: 0 8rpx 32rpx rgba(0, 0, 0, 0.5);
}

/* ===== 主题适配类 ===== */
.theme-adaptive {
  color: var(--text-color);
  background-color: var(--bg-color);
  border-color: var(--border-color);
  transition:
    color var(--transition-normal),
    background-color var(--transition-normal),
    border-color var(--transition-normal);
}

.theme-card {
  background-color: var(--card-bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-light);
  transition: all var(--transition-normal);

  &:hover {
    box-shadow: var(--shadow-medium);
  }
}

.theme-text-primary {
  color: var(--text-color);
}

.theme-text-secondary {
  color: var(--text-color-2);
}

.theme-text-tertiary {
  color: var(--text-color-3);
}

.theme-text-muted {
  color: var(--text-color-placeholder);
}

.theme-text-inverse {
  color: var(--text-color-inverse);
}

/* ===== 常用工具类 ===== */
.text-primary {
  color: var(--primary-color) !important;
}
.text-success {
  color: var(--success-color) !important;
}
.text-warning {
  color: var(--warning-color) !important;
}
.text-danger {
  color: var(--danger-color) !important;
}
.text-info {
  color: var(--info-color) !important;
}
.text-muted {
  color: var(--text-color-3) !important;
}

.bg-primary {
  color: var(--text-color-inverse);
  background-color: var(--primary-color) !important;
}
.bg-card {
  background-color: var(--card-bg-color) !important;
}
.bg-light {
  background-color: var(--bg-color-2) !important;
}

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

.shadow {
  box-shadow: var(--shadow-light);
}
.shadow-lg {
  box-shadow: var(--shadow-medium);
}

.transition {
  transition: all var(--transition-normal);
}

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

.text-center {
  text-align: center !important;
}
.font-bold {
  font-weight: 700 !important;
}

/* ===== 间距工具类 ===== */
.p-xs {
  padding: var(--spacing-xs) !important;
}
.p-sm {
  padding: var(--spacing-sm) !important;
}
.p-md {
  padding: var(--spacing-md) !important;
}
.p-lg {
  padding: var(--spacing-lg) !important;
}
.p-xl {
  padding: var(--spacing-xl) !important;
}

.m-xs {
  margin: var(--spacing-xs) !important;
}
.m-sm {
  margin: var(--spacing-sm) !important;
}
.m-md {
  margin: var(--spacing-md) !important;
}
.m-lg {
  margin: var(--spacing-lg) !important;
}
.m-xl {
  margin: var(--spacing-xl) !important;
}

.mt-sm {
  margin-top: var(--spacing-sm) !important;
}
.mt-md {
  margin-top: var(--spacing-md) !important;
}
.mt-lg {
  margin-top: var(--spacing-lg) !important;
}
.mt-xl {
  margin-top: var(--spacing-xl) !important;
}

.mb-sm {
  margin-bottom: var(--spacing-sm) !important;
}
.mb-md {
  margin-bottom: var(--spacing-md) !important;
}
.mb-lg {
  margin-bottom: var(--spacing-lg) !important;
}
.mb-xl {
  margin-bottom: var(--spacing-xl) !important;
}

/* ===== 字体大小类 ===== */
.text-xs {
  font-size: var(--font-xs) !important;
}
.text-sm {
  font-size: var(--font-sm) !important;
}
.text-md {
  font-size: var(--font-md) !important;
}
.text-lg {
  font-size: var(--font-lg) !important;
}
.text-xl {
  font-size: var(--font-xl) !important;
}
.text-2xl {
  font-size: var(--font-xxl) !important;
}
