/* ==========================================================================
   c-button : 汎用ボタン（Dark Pro）
   ========================================================================== */

.c-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.c-button:hover {
  background: var(--color-bg-input-hover);
  border-color: var(--color-border-strong);
}

.c-button[disabled] {
  opacity: .5;
  cursor: not-allowed;
}
.c-button[disabled]:hover {
  background: var(--color-bg-input);
  border-color: var(--color-border);
}

/* --- Primary（accent 塗り） --- */
.c-button--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse, #0b0d12);
  font-weight: 600;
  justify-content: center;
}
.c-button--primary:hover {
  background: var(--color-accent-strong, #7dd3fc);
  border-color: var(--color-accent-strong, #7dd3fc);
}

/* --- Ghost（border のみ） --- */
.c-button--ghost {
  background: transparent;
  border-color: var(--color-border);
}
.c-button--ghost:hover {
  background: var(--color-bg-input-hover);
  border-color: var(--color-border-strong);
}

/* --- Block（width:100%） --- */
.c-button--block {
  width: 100%;
  padding: 11px 16px;
  font-size: 14px;
  justify-content: center;
  gap: 8px;
}

/* --- Inner kbd（primary の上では暗色トーン） --- */
.c-button .c-kbd {
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  font-family: var(--font-family-mono, ui-monospace, monospace);
  font-size: 11px;
}
.c-button--primary .c-kbd {
  background: rgba(11, 13, 18, 0.2);
  color: rgba(11, 13, 18, 0.7);
  border-color: rgba(11, 13, 18, 0.15);
}