/**
 * 五行主题 · 全站按钮 / 强调色
 * 色值见 wuxing-palette.css（道教五行正色）
 * 默认木；会员 profile 可通过 wuxing-theme.js 切换
 */
@import url("wuxing-palette.css");

:root {
  --accent: var(--wx-mu);
  --accent-hover: #1b5e20;
  --accent-light: color-mix(in srgb, var(--wx-mu) 12%, transparent);
  --btn-bg: var(--accent);
  --btn-bg-hover: var(--accent-hover);
  --btn-color: #fff;
  --btn-radius: 9999px;
  --btn-min-height: 44px;
  --btn-padding-x: 28px;
  --btn-font-size: 15px;
  --btn-font-weight: 600;
  --btn-letter-spacing: 0.5px;
  --btn-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

:root[data-wuxing="mu"] {
  --accent: var(--wx-mu);
  --accent-hover: #1b5e20;
  --accent-light: color-mix(in srgb, var(--wx-mu) 12%, transparent);
}

:root[data-wuxing="huo"] {
  --accent: var(--wx-huo);
  --accent-hover: #8b0000;
  --accent-light: color-mix(in srgb, var(--wx-huo) 12%, transparent);
}

:root[data-wuxing="tu"] {
  --accent: var(--wx-tu);
  --accent-hover: #6d4c41;
  --accent-light: color-mix(in srgb, var(--wx-tu) 12%, transparent);
}

:root[data-wuxing="jin"] {
  --accent: var(--wx-jin-gold);
  --accent-hover: #b8962e;
  --accent-light: color-mix(in srgb, var(--wx-jin-gold) 14%, transparent);
}

:root[data-wuxing="shui"] {
  --accent: var(--wx-shui-deep);
  --accent-hover: #0a3d91;
  --accent-light: color-mix(in srgb, var(--wx-shui-deep) 12%, transparent);
}

:root[data-wuxing] {
  --btn-bg: var(--accent);
  --btn-bg-hover: var(--accent-hover);
}

/* ─── 主按钮（实心） ─── */
.btn-primary,
.cta-btn,
.zj-btn-primary,
.btn,
.error-card .btn-retry,
#view-report-btn.btn-primary,
#confirm-btn.btn-primary,
button.btn-primary,
a.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-min-height);
  padding: 0 var(--btn-padding-x);
  border: none;
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  box-shadow: var(--btn-shadow);
  background-color: var(--btn-bg);
  color: var(--btn-color);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover,
.cta-btn:hover,
.zj-btn-primary:hover,
.btn:hover,
.error-card .btn-retry:hover,
#view-report-btn.btn-primary:hover,
#confirm-btn.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
  background-color: var(--btn-bg-hover);
  color: var(--btn-color);
}

.btn-primary:active,
.cta-btn:active,
.zj-btn-primary:active,
.btn:active,
#confirm-btn.btn-primary:active {
  opacity: 0.92;
}

.btn-primary:disabled,
.btn-primary.loading:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── 次要 / 线框按钮 ─── */
.btn-secondary,
.btn-outline,
.btn-gold,
button.btn-secondary,
a.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-min-height);
  padding: 0 var(--btn-padding-x);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-secondary {
  background: var(--bg, #fff);
  color: var(--text-muted, #6b6b6b);
  border: 1px solid var(--border, #e5e3df);
}

.btn-secondary:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.btn-outline {
  background: #fff;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}

.btn-outline:hover {
  background: var(--accent-light);
}

.btn-gold {
  background: var(--wx-jin-gold, #d4af37);
  color: #fff;
  border: none;
  box-shadow: var(--btn-shadow);
}

.btn-gold:hover {
  background: #b8962e;
}

/* 全宽表单提交按钮保留宽度，仅统一圆角 */
form .btn-primary {
  width: 100%;
}