/* ============================================================
   Dream Cake 视觉模板系统 · theme.css
   按钮 5 款形态（pill/rounded/square/glass/3d）× 填充变体
   动效 3 档（soft/standard/lively）公共类
   由 assets/js/themes/theme-*.js 写入 CSS 变量与 data 属性
   ============================================================ */

/* ---------- 变量默认值（theme-pink 兜底） ---------- */
:root {
  --dc-primary: #F8BBD0;
  --dc-accent: #EC407A;
  --dc-dark: #4A148C;
  --dc-light: #FCE4EC;
  --dc-beige: #FFF9F6;
  --dc-body-bg: #FFF9F6;
  --dc-body-text: #4A148C;
  --dc-btn-primary-bg: #EC407A;
  --dc-btn-primary-bg-2: #EC407A;
  --dc-btn-primary-text: #FFFFFF;
  --dc-btn-primary-hover-bg: #4A148C;
  --dc-btn-secondary-bg: #FFFFFF;
  --dc-btn-secondary-text: #4A148C;
  --dc-btn-secondary-border: #F8BBD0;
  --dc-btn-secondary-border-width: 2px;
  --dc-btn-secondary-hover-bg: #FCE4EC;
  --dc-btn-secondary-hover-border: #F8BBD0;
  --dc-btn-secondary-hover-text: #4A148C;
  --dc-btn-success-bg: #4CAF50;
  --dc-btn-success-hover: #16A34A;
  --dc-btn-warning-bg: #FF9800;
  --dc-btn-warning-hover: #F59E0B;
  --dc-btn-danger-bg: #F44336;
  --dc-btn-danger-hover: #D32F2F;
  --dc-card-bg: #FFFFFF;
  --dc-card-border: rgba(252, 228, 236, 0.2);
  --dc-card-radius: 24px;
  --dc-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  --dc-card-shadow-hover: 0 20px 50px -12px rgba(45, 52, 54, 0.08);
  --dc-shadow-soft: 0 8px 30px rgba(236, 64, 122, 0.06);
  --dc-shadow-hover: 0 15px 35px rgba(236, 64, 122, 0.1);
  --dc-glow-shadow: 0 12px 28px rgba(236, 64, 122, 0.18);
  --dc-3d-shadow: rgba(0, 0, 0, 0.3);
  --dc-focus-ring: rgba(236, 64, 122, 0.5);
}

/* ============================================================
   按钮 · 公共基类
   ============================================================ */
.cake-btn, .cake-btn-primary, .cake-btn-secondary,
.cake-btn-success, .cake-btn-warning,
.btn-primary, .btn-secondary, .btn-danger,
.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  border: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cake-btn { border-radius: 9999px; }

/* ---------- 填充（跟随主题变量） ---------- */
.cake-btn-primary {
  background: var(--dc-btn-primary-bg);
  color: var(--dc-btn-primary-text);
  box-shadow: var(--dc-shadow-soft);
}
.cake-btn-primary:hover {
  background: var(--dc-btn-primary-hover-bg);
}

.cake-btn-secondary {
  background: var(--dc-btn-secondary-bg);
  color: var(--dc-btn-secondary-text);
  border: var(--dc-btn-secondary-border-width, 2px) solid var(--dc-btn-secondary-border);
}
.cake-btn-secondary:hover {
  background: var(--dc-btn-secondary-hover-bg);
  border-color: var(--dc-btn-secondary-hover-border);
  color: var(--dc-btn-secondary-hover-text);
}

.cake-btn-success { background: var(--dc-btn-success-bg); color: #FFFFFF; }
.cake-btn-success:hover { background: var(--dc-btn-success-hover); }

.cake-btn-warning { background: var(--dc-btn-warning-bg); color: #FFFFFF; }
.cake-btn-warning:hover { background: var(--dc-btn-warning-hover); }

.btn-primary { background: var(--dc-btn-primary-bg); color: var(--dc-btn-primary-text); box-shadow: var(--dc-shadow-soft); }
.btn-secondary { background: var(--dc-btn-secondary-bg); color: var(--dc-btn-secondary-text); }
.btn-danger { background: var(--dc-btn-danger-bg); color: #FFFFFF; }
.btn-danger:hover { background: var(--dc-btn-danger-hover); }

/* ---------- 填充变体：描边 / 渐变（可选公共类） ---------- */
.cake-btn-outline, .btn-outline {
  background: transparent;
  color: var(--dc-accent);
  border: 2px solid var(--dc-accent);
}
.cake-btn-outline:hover, .btn-outline:hover { background: var(--dc-light); }

.cake-btn-gradient, .btn-gradient {
  background: linear-gradient(135deg, var(--dc-btn-primary-bg) 0%, var(--dc-btn-primary-bg-2) 100%);
  color: var(--dc-btn-primary-text);
}

/* ============================================================
   按钮 · 5 款形态（html[data-dc-button] 决定当前款式）
   ============================================================ */
html[data-dc-button="pill"] .cake-btn,
html[data-dc-button="pill"] .cake-btn-primary,
html[data-dc-button="pill"] .cake-btn-secondary,
html[data-dc-button="pill"] .cake-btn-success,
html[data-dc-button="pill"] .cake-btn-warning,
html[data-dc-button="pill"] .btn-primary,
html[data-dc-button="pill"] .btn-secondary,
html[data-dc-button="pill"] .btn-danger,
html[data-dc-button="pill"] .theme-btn {
  border-radius: 9999px;
  font-weight: 700;
}
html[data-dc-button="pill"] .cake-btn-primary,
html[data-dc-button="pill"] .btn-primary {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
html[data-dc-button="pill"] .theme-card-btn {
  border-radius: 9999px;
}

html[data-dc-button="rounded"] .cake-btn,
html[data-dc-button="rounded"] .cake-btn-primary,
html[data-dc-button="rounded"] .cake-btn-secondary,
html[data-dc-button="rounded"] .cake-btn-success,
html[data-dc-button="rounded"] .cake-btn-warning,
html[data-dc-button="rounded"] .btn-primary,
html[data-dc-button="rounded"] .btn-secondary,
html[data-dc-button="rounded"] .btn-danger,
html[data-dc-button="rounded"] .theme-btn {
  border-radius: 12px;
}
html[data-dc-button="rounded"] .theme-card-btn {
  border-radius: 12px;
}

html[data-dc-button="square"] .cake-btn,
html[data-dc-button="square"] .cake-btn-primary,
html[data-dc-button="square"] .cake-btn-secondary,
html[data-dc-button="square"] .cake-btn-success,
html[data-dc-button="square"] .cake-btn-warning,
html[data-dc-button="square"] .btn-primary,
html[data-dc-button="square"] .btn-secondary,
html[data-dc-button="square"] .btn-danger,
html[data-dc-button="square"] .theme-btn {
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
html[data-dc-button="square"] .cake-btn-secondary,
html[data-dc-button="square"] .btn-secondary {
  border-width: 1px;
}
html[data-dc-button="square"] .theme-card-btn {
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

html[data-dc-button="glass"] .cake-btn,
html[data-dc-button="glass"] .cake-btn-primary,
html[data-dc-button="glass"] .cake-btn-secondary,
html[data-dc-button="glass"] .cake-btn-success,
html[data-dc-button="glass"] .cake-btn-warning,
html[data-dc-button="glass"] .btn-primary,
html[data-dc-button="glass"] .btn-secondary,
html[data-dc-button="glass"] .btn-danger,
html[data-dc-button="glass"] .theme-btn {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 16px rgba(0, 0, 0, 0.06);
  color: var(--dc-dark);
}
html[data-dc-button="glass"] .cake-btn-primary:hover,
html[data-dc-button="glass"] .cake-btn-secondary:hover,
html[data-dc-button="glass"] .btn-primary:hover,
html[data-dc-button="glass"] .btn-secondary:hover,
html[data-dc-button="glass"] .theme-btn:hover {
  background: rgba(255, 255, 255, 0.45);
}
html[data-dc-button="glass"] .theme-card-btn {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 16px rgba(0, 0, 0, 0.06);
}

html[data-dc-button="3d"] .cake-btn,
html[data-dc-button="3d"] .cake-btn-primary,
html[data-dc-button="3d"] .cake-btn-secondary,
html[data-dc-button="3d"] .cake-btn-success,
html[data-dc-button="3d"] .cake-btn-warning,
html[data-dc-button="3d"] .btn-primary,
html[data-dc-button="3d"] .btn-secondary,
html[data-dc-button="3d"] .btn-danger,
html[data-dc-button="3d"] .theme-btn {
  border-radius: 12px;
}
html[data-dc-button="3d"] .theme-card-btn {
  border-radius: 12px;
  box-shadow: 0 5px 0 var(--dc-3d-shadow), 0 12px 24px -8px rgba(0, 0, 0, 0.22);
}
html[data-dc-button="3d"] .cake-btn-primary,
html[data-dc-button="3d"] .btn-primary {
  background: linear-gradient(180deg, var(--dc-btn-primary-bg) 0%, var(--dc-btn-primary-bg-2) 100%);
  box-shadow: 0 4px 0 var(--dc-3d-shadow), 0 10px 20px -8px rgba(0, 0, 0, 0.25);
}
html[data-dc-button="3d"] .cake-btn-primary:active,
html[data-dc-button="3d"] .btn-primary:active {
  box-shadow: 0 1px 0 var(--dc-3d-shadow);
  transform: translateY(3px);
}
html[data-dc-button="3d"] .cake-btn-primary:hover,
html[data-dc-button="3d"] .btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 5px 0 var(--dc-3d-shadow), 0 12px 24px -8px rgba(0, 0, 0, 0.3);
}
html[data-dc-button="3d"] .cake-btn-secondary,
html[data-dc-button="3d"] .btn-secondary {
  border-width: 1px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
}
html[data-dc-button="3d"] .cake-btn-secondary:active,
html[data-dc-button="3d"] .btn-secondary:active {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.15);
  transform: translateY(3px);
}

/* ============================================================
   卡片公共类
   ============================================================ */
.cake-card, .card-panel, .theme-card {
  background: var(--dc-card-bg);
  border-radius: var(--dc-card-radius);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cake-card { box-shadow: var(--dc-shadow-soft); }
.card-panel { border: 1px solid var(--dc-card-border); box-shadow: var(--dc-card-shadow); }

/* ============================================================
   动效 · 3 档（html[data-dc-effects] 决定当前档位）
   ============================================================ */
@keyframes dc-btn-bounce {
  0% { transform: scale(1); }
  35% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* ---------- 轻柔 soft：仅背景微变（透明度0.95），几乎无位移 ---------- */
html[data-dc-effects="soft"] .cake-btn:hover,
html[data-dc-effects="soft"] .cake-btn-primary:hover,
html[data-dc-effects="soft"] .cake-btn-secondary:hover,
html[data-dc-effects="soft"] .btn-primary:hover,
html[data-dc-effects="soft"] .btn-secondary:hover,
html[data-dc-effects="soft"] .btn-danger:hover,
html[data-dc-effects="soft"] .theme-btn:hover,
html[data-dc-effects="soft"] .cake-btn:active,
html[data-dc-effects="soft"] .cake-btn-primary:active,
html[data-dc-effects="soft"] .cake-btn-secondary:active,
html[data-dc-effects="soft"] .btn-primary:active,
html[data-dc-effects="soft"] .btn-secondary:active,
html[data-dc-effects="soft"] .btn-danger:active,
html[data-dc-effects="soft"] .theme-btn:active {
  opacity: 0.95;
}
html[data-dc-effects="soft"] .cake-card:hover,
html[data-dc-effects="soft"] .card-panel:hover,
html[data-dc-effects="soft"] .theme-card-btn:hover {
  box-shadow: var(--dc-shadow-hover);
}
html[data-dc-effects="soft"] .theme-img:hover,
html[data-dc-effects="soft"] .group:hover .theme-img {
  transform: scale(1.01);
}

/* ---------- 标准 standard：hover 上浮2px + 阴影加深 + 图片1.03 ---------- */
html[data-dc-effects="standard"] .cake-btn:active,
html[data-dc-effects="standard"] .cake-btn-primary:active,
html[data-dc-effects="standard"] .cake-btn-secondary:active,
html[data-dc-effects="standard"] .btn-primary:active,
html[data-dc-effects="standard"] .btn-secondary:active,
html[data-dc-effects="standard"] .btn-danger:active,
html[data-dc-effects="standard"] .theme-btn:active {
  transform: scale(0.95);
}
html[data-dc-effects="standard"] .cake-btn-primary:hover,
html[data-dc-effects="standard"] .btn-primary:hover,
html[data-dc-effects="standard"] .cake-btn-secondary:hover,
html[data-dc-effects="standard"] .btn-secondary:hover,
html[data-dc-effects="standard"] .theme-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--dc-shadow-hover);
}
html[data-dc-effects="standard"] .cake-card:hover,
html[data-dc-effects="standard"] .card-panel:hover,
html[data-dc-effects="standard"] .theme-card-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--dc-shadow-hover);
}
html[data-dc-effects="standard"] .theme-img:hover,
html[data-dc-effects="standard"] .group:hover .theme-img {
  transform: scale(1.03);
}

/* ---------- 活泼 lively：hover 上浮4px + 彩色阴影 + 图片1.08 + 点击弹跳0.92 ---------- */
html[data-dc-effects="lively"] .cake-btn:active,
html[data-dc-effects="lively"] .cake-btn-primary:active,
html[data-dc-effects="lively"] .cake-btn-secondary:active,
html[data-dc-effects="lively"] .btn-primary:active,
html[data-dc-effects="lively"] .btn-secondary:active,
html[data-dc-effects="lively"] .btn-danger:active,
html[data-dc-effects="lively"] .theme-btn:active {
  animation: dc-btn-bounce 0.3s ease;
}
html[data-dc-effects="lively"] .cake-btn-primary:hover,
html[data-dc-effects="lively"] .btn-primary:hover,
html[data-dc-effects="lively"] .cake-btn-secondary:hover,
html[data-dc-effects="lively"] .btn-secondary:hover,
html[data-dc-effects="lively"] .theme-btn:hover {
  transform: translateY(-4px);
  box-shadow: var(--dc-glow-shadow);
}
html[data-dc-effects="lively"] .cake-card:hover,
html[data-dc-effects="lively"] .card-panel:hover,
html[data-dc-effects="lively"] .theme-card-btn:hover {
  transform: translateY(-4px);
  box-shadow: var(--dc-glow-shadow);
}
html[data-dc-effects="lively"] .theme-img:hover,
html[data-dc-effects="lively"] .group:hover .theme-img {
  transform: scale(1.08);
}

/* ============================================================
   图片公共类
   ============================================================ */
.theme-img {
  transition: transform 0.5s ease, box-shadow 0.3s ease;
}