/**
 * Button 按钮组件
 * ─────────────────────────────────────────────
 * 引用 tokens/semantic.css 色彩、tokens/typography.css 字体
 * 按钮文案默认字体样式：与设计系统「字体」面板 Title3/Regular 一致（.type-sample.type-title3）
 * Token：--font-family-sans、--text-title3-size、--text-title3-line-height、--text-title3-weight
 * 变体：主按钮 / 主按钮（橙）/ 辅按钮 / 次按钮 / 描边按钮 / 警告按钮 / 加载按钮 / 纯图标（btn-icon-ghost）
 * 状态：默认 / Hover / Click(Active) / Disabled
 * 依赖：需先引入 tokens/index.css（含 typography）
 */

/* ─── 基础结构（字体样式 = Title3/Regular，与 panel-type 中 .type-sample.type-title3 同源 Token）──── */
button.btn,
a.btn,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 44px;
  padding: 8px 24px;
  border-radius: 8px;
  border: none;
  font-family: var(--font-family-sans, "MiSans", -apple-system, "PingFang SC", sans-serif);
  font-size: var(--text-title3-size, 15px);
  font-weight: var(--text-title3-weight, 400);
  line-height: var(--text-title3-line-height, 26px);
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;

  /* 遮罩层用于 hover/active 状态叠加 */
  position: relative;
  overflow: hidden;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  transition: background 0.15s ease;
  pointer-events: none;
  border-radius: inherit;
}

.btn:active {
  transform: scale(0.98);
}

/* ─── 图标 ─── */
.btn-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-icon img,
.btn-icon svg {
  width: 100%;
  height: 100%;
}

/* ═════════════════════════════════════════════
   主按钮（黑）
   背景深色，overlay 用白色
═════════════════════════════════════════════ */
.btn-primary {
  background: var(--color-btn-base);      /* #27272A */
  color: var(--color-text-7);             /* white */
}
.btn-primary:hover::after  { background: rgba(255, 255, 255, 0.10); }
.btn-primary:active::after { background: rgba(255, 255, 255, 0.18); }

/* ═════════════════════════════════════════════
   主按钮（橙）品牌色
   背景橙色，overlay 用黑色
═════════════════════════════════════════════ */
.btn-brand {
  background: var(--color-brand);         /* #FF6E39 */
  color: var(--color-text-7);             /* white */
}
.btn-brand:hover::after  { background: rgba(0, 0, 0, 0.08); }
.btn-brand:active::after { background: rgba(0, 0, 0, 0.14); }

/* ═════════════════════════════════════════════
   辅按钮（灰）
   背景暖灰，overlay 用白色
═════════════════════════════════════════════ */
.btn-secondary {
  background: var(--color-btn-secondary); /* #A8A29F */
  color: rgba(255, 255, 255, 0.70);       /* light-8 */
}
.btn-secondary:hover::after  { background: rgba(255, 255, 255, 0.12); }
.btn-secondary:active::after { background: rgba(255, 255, 255, 0.20); }

/* ═════════════════════════════════════════════
   次按钮（取消）
   背景纯白，overlay 用黑色
═════════════════════════════════════════════ */
.btn-cancel {
  background: var(--color-btn-cancel);    /* white */
  color: var(--color-neutral-7);          /* #56524E */
}
.btn-cancel:hover::after  { background: rgba(26, 26, 26, 0.05); }
.btn-cancel:active::after { background: rgba(26, 26, 26, 0.10); }

/* ═════════════════════════════════════════════
   描边按钮（Outline）
   浅背景 + 1px 描边（--color-btn-outline-border），overlay 用黑色
   选择器与基础 button.btn 同权，故 border 覆盖 base 的 border:none
═════════════════════════════════════════════ */
button.btn.btn-outline,
a.btn.btn-outline,
.btn.btn-outline {
  background: var(--color-btn-outline);
  color: var(--color-neutral-7);
  border: 1px solid var(--color-btn-outline-border);
}
.btn-outline:hover::after  { background: rgba(26, 26, 26, 0.05); }
.btn-outline:active::after { background: rgba(26, 26, 26, 0.10); }

/* ═════════════════════════════════════════════
   警告按钮（Danger）
   浅红背景，红色文字
═════════════════════════════════════════════ */
.btn-danger {
  background: var(--color-btn-danger);    /* #FEF1F1 */
  color: var(--color-btn-danger-text);    /* #FF6565 */
}
.btn-danger:hover::after  { background: rgba(220, 40, 40, 0.06); }
.btn-danger:active::after { background: rgba(220, 40, 40, 0.12); }

/* ═════════════════════════════════════════════
   轻量按钮（Ghost）
   浅底 + 灰字，hover/click 叠加深色遮罩，按压 scale(0.96) 更明显
   用于：日历「上一月/今天/下一月」、编辑任务 等
═════════════════════════════════════════════ */
button.btn.btn-ghost,
a.btn.btn-ghost,
.btn.btn-ghost {
  background: var(--color-card-light-alpha);
  color: var(--color-text-4);
  box-shadow: 0 1px 2px var(--color-black-1);
}
.btn-ghost:hover::after  { background: rgba(26, 26, 26, 0.02); }
.btn-ghost:active::after { background: rgba(26, 26, 26, 0.06); }
.btn-ghost:active {
  transform: scale(0.96);
}
/* 仅图标、44×44 方形（如日历左右箭头） */
.btn-ghost.btn-square {
  width: 44px;
  min-width: 44px;
  padding: 0;
}
.btn-ghost .btn-icon,
.btn-ghost .btn-icon svg {
  color: inherit;
}

/* ═════════════════════════════════════════════
   纯图标按钮（幽灵 · 32×32）
   圆角 8px 方形热区；hover/active 用 ::after 叠层 + semantic --color-icon-button-*
   用于：弹窗关闭（配合 .modal-standard-header__close）、工具栏仅图标
   与 .btn 互斥：勿再叠加 .btn，避免 44px 高度冲突
═════════════════════════════════════════════ */
button.btn-icon-ghost,
.btn-icon-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-4);
  cursor: pointer;
  font-family: var(--font-family-sans, "MiSans", -apple-system, "PingFang SC", sans-serif);
  font-size: inherit;
  line-height: 0;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  transition: color 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-icon-ghost::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  transition: background 0.15s ease;
  pointer-events: none;
}
.btn-icon-ghost:hover {
  color: var(--color-text-3);
}
.btn-icon-ghost:hover::after {
  background: var(--color-icon-button-hover-bg);
}
.btn-icon-ghost:active::after {
  background: var(--color-icon-button-pressed-bg);
}
.btn-icon-ghost:active {
  transform: scale(0.96);
}
.btn-icon-ghost:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-brand);
}
.btn-icon-ghost > svg {
  position: relative;
  z-index: 1;
  display: block;
  flex-shrink: 0;
}

/* ═════════════════════════════════════════════
   加载按钮（Loading）
   禁用态 + 转圈动画
═════════════════════════════════════════════ */
.btn-loading {
  background: var(--color-btn-disabled);  /* rgba(26,26,26,0.12) */
  color: var(--color-btn-disabled-text);  /* rgba(26,26,26,0.18) */
  cursor: not-allowed;
  pointer-events: none;
}
.btn-loading .btn-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(26, 26, 26, 0.18);
  border-top-color: rgba(26, 26, 26, 0.40);
  border-radius: 50%;
  animation: btn-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* ═════════════════════════════════════════════
   通用 Disabled 状态
   任意按钮加 disabled 属性或 .is-disabled 类
═════════════════════════════════════════════ */
.btn:disabled,
.btn[disabled],
.btn.is-disabled {
  background: var(--color-btn-disabled);  /* rgba(26,26,26,0.12) */
  color: var(--color-btn-disabled-text);  /* rgba(26,26,26,0.18) */
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* 描边按钮 disabled 保留 1px 描边 */
.btn-outline:disabled,
.btn-outline.is-disabled {
  background: transparent;
  border: 1px solid var(--color-btn-disabled);
  color: var(--color-btn-disabled-text);
}

/* ═════════════════════════════════════════════
   暗色模式适配
═════════════════════════════════════════════ */
[data-theme="dark"] .btn-primary {
  background: var(--color-btn-base);      /* #F5F5F4 */
  color: var(--color-neutral-1);          /* #1C1917 */
}
[data-theme="dark"] .btn-primary:hover::after  { background: rgba(0, 0, 0, 0.08); }
[data-theme="dark"] .btn-primary:active::after { background: rgba(0, 0, 0, 0.14); }

[data-theme="dark"] .btn-cancel {
  background: var(--color-btn-cancel);    /* rgba(26,26,26,0.18) */
  color: var(--color-text-3);
}

[data-theme="dark"] .btn-outline {
  background: var(--color-btn-outline);
  border-color: var(--color-btn-outline-border); /* #4F4944 */
  color: var(--color-text-3);
}

[data-theme="dark"] .btn:disabled,
[data-theme="dark"] .btn[disabled],
[data-theme="dark"] .btn.is-disabled {
  background: var(--color-btn-disabled);  /* rgba(255,255,255,0.08) */
  color: var(--color-btn-disabled-text);  /* rgba(255,255,255,0.12) */
}