/*
* @source: https://blog.51cto.com/u_14587/14273698
* h1{width: 50%; height: 30px; margin: 10px auto; text-align: center;} 
*
*/


.btn {
  background-color: var(--primary-color); /* 用主色调做背景 */
  color: var(--text-inverse); /* 用反色文字（白色） */
  border: none;
  border-radius: var(--radius-sm); /* 小圆角 */
  padding: var(--space-2) var(--space-4); /* 上下8px，左右16px内边距 */
  font-size: var(--text-base); /* 基础字体大小 */
  font-weight: var(--font-medium); /* 中等粗细 */
  transition: all var(--transition-normal); /* 过渡动画 */
  cursor: pointer;
  box-shadow: var(--shadow-sm); /* 轻微阴影 */
}

/* 按钮hover效果 */
.btn:hover {
  background-color: var(--primary-dark); /* hover时用主色深色版 */
  box-shadow: var(--shadow-md); /* 加中等阴影 */
  transform: translateY(-1px); /* 轻微上移效果 */
}

/* 成功按钮（复用基础样式，只改颜色） */
.btn-success {
  background-color: var(--success-color); /* 用成功色 */
}

.btn-success:hover {
  background-color: #389e0d; /* 成功色的深色版 */
}

/* 警告按钮 */
.btn-warning {
  background-color: var(--warning-color);
}

.btn-warning:hover {
  background-color: #d48806; /* 警告色的深色版 */
}