/* NEXUS — Button
   基类 + 四种语气（primary / secondary 默认 / ghost / danger）+ 三种尺寸。
   只用 Semantic / Component Token；页面区域文件不再定义按钮外观。 */

.btn {
  --btn-bg: transparent;
  --btn-bg-hover: var(--color-panel-hover);
  --btn-border: var(--color-panel-border);
  --btn-border-hover: var(--color-panel-border-strong);
  --btn-fg: var(--color-text-soft);
  --btn-fg-hover: var(--color-text);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: var(--btn-h);
  padding: 0 var(--control-pad-x);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-control);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-body);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  /* 只过渡颜色类属性：不改尺寸，不产生布局抖动 */
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.btn:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  color: var(--btn-fg-hover);
}

/* 点击只做 0.5px 位移，不做弹跳 */
.btn:active { transform: translateY(0.5px); }

.btn:focus-visible {
  outline: none;
  border-color: var(--color-ice-line);
  box-shadow: var(--focus-ring);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

.btn:disabled:hover,
.btn[aria-disabled='true']:hover {
  background: var(--btn-bg);
  border-color: var(--btn-border);
  color: var(--btn-fg);
}

/* ------------------------------------------------------------ 语气 */

/* primary：系统原生的「反转色」—— 深色主题是浅底深字，浅色主题是深底浅字。
   不占用强调色：强调色只留给当前项、聚焦环与保存状态。 */
.btn--primary {
  --btn-bg: var(--color-text);
  --btn-bg-hover: var(--color-text-soft);
  --btn-border: transparent;
  --btn-border-hover: transparent;
  --btn-fg: var(--color-bg);
  --btn-fg-hover: var(--color-bg);
}

/* secondary：显式声明用中性表面（与默认同值，供 JS 表达意图） */
.btn--secondary {
  --btn-bg: var(--color-panel);
  --btn-bg-hover: var(--color-panel-hover);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-fg: var(--color-text-mute);
}
.btn--ghost:hover {
  --btn-bg-hover: var(--color-panel-hover);
  --btn-border-hover: transparent;
  --btn-fg-hover: var(--color-text);
}

.btn--danger {
  --btn-bg: var(--color-danger-soft);
  --btn-bg-hover: var(--color-danger-hover);
  --btn-border: var(--color-danger-line);
  --btn-border-hover: var(--color-danger);
  --btn-fg: var(--color-danger-strong);
  --btn-fg-hover: var(--color-danger-strong-hover);
}

/* ------------------------------------------------------------ 尺寸 */

.btn--sm {
  height: var(--btn-h-sm);
  padding: 0 var(--control-pad-x-sm);
  gap: 5px;
}

.btn--lg {
  height: var(--btn-h-lg);
  padding: 0 var(--control-pad-x-lg);
  gap: 7px;
  font-size: var(--text-sm);
}

/* 图标槽：尺寸跟着按钮走，不改变按钮高度 */
.btn__icon {
  display: inline-flex;
  flex: none;
}
.btn__icon svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}
.btn--sm .btn__icon svg { width: var(--icon-xs); height: var(--icon-xs); }
.btn--lg .btn__icon svg { width: var(--icon-lg); height: var(--icon-lg); }