/* 适老化（暖色）设计令牌与共享组件
   被首页与「养老陪伴智能体」模块页共同引用：门户内涉及养老场景的弹窗、按钮统一使用暖色大字号样式。 */

:root {
  --e-bg: #FDF6EC;
  --e-bg-2: #FAEAD3;
  --e-surface: #FFFFFF;
  --e-surface-2: #FFF9F0;
  --e-line: #E7D6BC;
  --e-line-strong: #D8C09B;
  --e-text: #33281D;
  --e-text-2: #6A5847;
  --e-primary: #D9600D;
  --e-primary-dark: #B44C05;
  --e-warm: #F0A63C;
  --e-green: #2C7A57;
  --e-radius: 20px;
  --e-shadow: 0 10px 26px rgba(122, 84, 40, 0.12);
}

/* 大按钮：最小高度 60px，适合长者点击 */
.e-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 60px;
  padding: 0 32px;
  border: 2px solid transparent;
  border-radius: 16px;
  font-family: inherit;
  font-size: 1.05em;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.e-btn svg { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.e-btn--primary { background: var(--e-primary); color: #FFFFFF; box-shadow: 0 8px 20px rgba(217, 96, 13, 0.28); }
.e-btn--primary:hover { background: var(--e-primary-dark); }
.e-btn--ghost { background: var(--e-surface); color: var(--e-primary-dark); border-color: var(--e-line-strong); }
.e-btn--ghost:hover { background: var(--e-bg-2); }
.e-btn:active { transform: translateY(1px); }

/* 键值信息行 */
.e-kv { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 2px dashed var(--e-line); font-size: 1em; }
.e-kv:last-child { border-bottom: none; }
.e-kv > span:first-child { color: var(--e-text-2); flex-shrink: 0; }
.e-kv > span:last-child { font-weight: 700; text-align: right; }

/* 状态标签 */
.e-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.86em;
  font-weight: 700;
}
.e-tag--done { background: #E6F4EC; color: var(--e-green); border: 2px solid #B7DEC9; }
.e-tag--doing { background: #FFF0D8; color: #A85408; border: 2px solid #F0C88A; }
.e-tag--todo { background: #F3F0EB; color: var(--e-text-2); border: 2px solid #E0D6C8; }

/* 暖色适老化弹窗（首页与模块页共用） */
.cp-modal--warm {
  max-width: 620px;
  border: 2px solid #F0C88A;
  border-radius: 24px;
  background: linear-gradient(165deg, #FFFFFF 0%, #FFF6E8 100%);
  color: var(--e-text);
  font-size: 18px;
  box-shadow: 0 20px 50px rgba(122, 84, 40, 0.22);
}
.cp-modal--warm .cp-modal-title { color: var(--e-text); font-size: 1.3em; }
.cp-modal--warm .cp-modal-body { color: var(--e-text-2); font-size: 1em; line-height: 1.9; }
.cp-modal--warm .cp-modal-close {
  width: 44px; height: 44px; font-size: 1.2em;
  border: 2px solid var(--e-line-strong);
  background: #FFFFFF;
  color: var(--e-text-2);
}
.cp-modal--warm .cp-modal-close:hover { background: var(--e-bg-2); color: var(--e-text); }
.cp-modal--warm .cp-icon { background: #FFF3E0; border: 2px solid #F2D6A8; color: var(--e-primary-dark); }
.cp-modal--warm .cp-icon svg { width: 26px; height: 26px; }
.cp-modal--warm .cp-card { background: #FFFFFF; border: 2px solid var(--e-line); box-shadow: none; }
.cp-modal--warm .cp-badge { font-size: 0.9em; height: 30px; padding: 0 14px; }
.cp-modal--warm .cp-badge--dev { color: #A85408; background: #FFF3E0; border-color: #F0C88A; }
.cp-modal--warm .cp-modal-foot { flex-wrap: wrap; gap: 12px; }

@media (max-width: 640px) {
  .cp-modal--warm { font-size: 17px; }
  .cp-modal--warm .e-btn { width: 100%; }
}