:root {
  /* 主色调改为紫色系 */
  --primary-color: #7c3aed;  /* 主紫色 */
  --secondary-color: #8b5cf6;  /* 次要紫色 */
  --accent-color: #a855f7;  /* 强调紫色 */
  --gradient-start: #7c3aed;  /* 渐变开始色 */
  --gradient-end: #8b5cf6;  /* 渐变结束色 */
  
  /* 背景和文字颜色 */
  --background-color: #f8f9fa;
  --text-color: #2b2c34;
  --surface-color: #ffffff;
  --border-color: #e9ecef;
  
  /* 动画时间 */
  --transition-speed: 0.3s;
  
  /* 间距 */
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  
  /* 圆角 */
  --border-radius: 12px;

  /* 容器宽度 */
  --container-width: min(95%, 1200px);
  
  /* 响应式断点 */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}

/* 响应式字体大小 */
@media (max-width: 768px) {
  :root {
    font-size: 14px;
    --spacing-lg: 1.5rem;
    --spacing-md: 0.75rem;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  :root {
    font-size: 16px;
  }
}

@media (min-width: 1201px) {
  :root {
    font-size: 18px;
  }
}