:root {
  // 浅色模式下的变量
  --bg-color: #ffffff;
  --text-color: #333333;
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --border-color: #e0e0e0;
}

// 深色模式
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #333;
    --text-color: #f0f0f0;
    --primary-color: #61dafb;
    --secondary-color: #4ade80;
    --border-color: #2a2a2a;
  }
}

// 使用 UnoCSS 的暗色模式类
html.dark {
  --bg-color: #121212;
  --text-color: #f0f0f0;
  --primary-color: #61dafb;
  --secondary-color: #4ade80;
  --border-color: #2a2a2a;
}

// 通用主题类
.theme-bg {
  background-color: var(--bg-color);
}

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

.theme-border {
  border-color: var(--border-color);
}

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

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

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

.theme-secondary-bg {
  background-color: var(--secondary-color);
}

// 组合类
.theme-container {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.theme-card {
  background-color: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}
